Javascript 反应-检查数组中是否已存在值？

我正在开发一个简单的React购物列表，您可以在其中添加/删除列表中的项目（）。到目前为止，它工作得很好，除非您在列表中添加一个重复条目并尝试删除它，否则它会变得混乱（它使用值作为键，所以可能这就是原因）。为了解决这个问题，我想在添加项时检查列表数组中是否已经存在该值，并防止添加该值。我尝试在HandLeadNew函数中添加另一个检查，方法是将以下内容更改为：

if（this.state.newItem.length>0）{

到：

if（this.state.newItem.length>0&&this.state.items.includes（this.state.newItem）==false{

（第18行），但这似乎不起作用。我该怎么做？有什么想法吗？

问题是条目表单无法访问列表进行任何比较。您可以通过将

addItem

函数更改为：

addItem(item) {
  // only add if the item doesn't exist in the list
  if(this.state.items.indexOf(item) < 0){
    this.setState((state) => ({
      items: state.items.concat([item])
    }))
  }
}

addItem（项目）{
//仅当列表中不存在该项时添加
if（this.state.items.indexOf（item）<0）{
this.setState（（状态）=>({
items:state.items.concat（[item]）
}))
}
}

---

请注意，我在这里使用

索引，但是
包含
也可以。您可以随意进行比较。
问题是条目表单无法访问列表进行任何比较。您可以通过将
addItem
函数更改为：

addItem(item) {
  // only add if the item doesn't exist in the list
  if(this.state.items.indexOf(item) < 0){
    this.setState((state) => ({
      items: state.items.concat([item])
    }))
  }
}

addItem（项目）{
//仅当列表中不存在该项时添加
if（this.state.items.indexOf（item）<0）{
this.setState（（状态）=>({
items:state.items.concat（[item]）
}))
}
}

请注意，我在这里使用了
indexOf
，但是
includes
也可以。您可以随意进行比较。
请在这里发布您的代码，而不是在外部链接后面。尝试使用some（），它将在数组中工作。如果找到一对，则某些（函数（o）{return o[“key1”]==“value2”；}）将为true，否则为false。
如果（this.state.newItem.length&！this.state.items.includes（this.state.newItem））
您可以使用此选项，谢谢@NarendraChouhan，这与下面Matt Way的答案一样有效。我更喜欢此答案，因为当您单击“添加项目”时，它不会删除文本输入项。我的荣幸@Godge您可以将答案标记为正确，如果您觉得我的答案适合您，我已将代码发布在下面，请将您的代码发布在这里，而不是后面外部链接。使用some（）尝试，它将在数组中工作。如果找到对，则some（函数（o）{return o[“key1”]==“value2”；}）将为true，否则为false。
if（this.state.newItem.length&！this.state.items.includes（this.state.newItem））
您可以使用此选项谢谢@NarendraChouhan，这与下面Matt Way的答案一样有效。我更喜欢此答案，因为当您单击“添加项目”时，它不会删除文本输入项。我的荣幸@Godge您可以将答案标记为正确，如果您觉得我的答案对您有效，我已将代码发布在下面Hanks@MattWay，这就成功了必须承认，我更喜欢@NarendraChouhan的答案，因为它不会触发
this.setState（{newItem:''}）
code，从输入中删除文本，但在其他方面也可以。编辑：忽略我之前的评论，在我测试了一点之后，我意识到@NarendraChouhan's可以防止在原始重复值已被删除的情况下添加项目，因此您的答案似乎是解决方案。再次感谢！您可以添加一些案例过滤器的灵敏度，检查这支笔：谢谢@AbdelkarimELAMEL，这是一个很好的解决方案。我也在检查中添加了一个修剪，这样它可以检查不包括前导/尾随空格的重复项，效果很好。谢谢@MattWay，这就成功了！我必须承认，我更喜欢@NarendraChouhan的答案，因为它不会触发
this.setState（{newItem:''}）
code，从输入中删除文本，但在其他方面也可以。编辑：忽略我之前的评论，在我测试了一点之后，我意识到@NarendraChouhan's可以防止在原始重复值已被删除的情况下添加项目，因此您的答案似乎是解决方案。再次感谢！您可以添加一些案例过滤器的灵敏度，检查这支笔：谢谢@AbdelkarimELAMEL，这是一个很好的解决方案。我也在检查中添加了一个修剪，这样它可以检查重复项，不包括前导/尾随空格，效果很好。