React - 检查数组中是否已经存在一个值？

Question

我正在制作一个简单的 React 购物清单，您可以在其中添加/删除列表中的项目 (pen here)。到目前为止它工作得很好，除非你在列表中添加一个重复的条目并尝试删除它，它会变得混乱（它使用值作为键，所以大概这就是原因）。为了解决这个问题，我想在添加项目时检查该值是否已存在于列表数组中，并阻止它被添加。我尝试通过将 if (this.state.newItem.length > 0){ 更改为 if (this.state.newItem.length > 0 && this.state.items.includes(this.state.newItem) == false){ （第 18 行）在 handleAddNew 函数中添加另一个检查，但这似乎不起作用。关于我应该如何做这件事的任何想法？

Answer 1

问题是输入表单无权访问列表进行任何比较。您可以通过将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])
    }))
  }
}

请注意，我在这里使用indexOf，但includes 也可以。您可以随意进行比较。