React - 检查数组中的重复项

Question

我正在制作一个简单的列表，您可以在其中简单地将您的单词添加到列表中。主要问题是重复，我尝试了很多解决方案，但它们甚至都不接近。

state = {
    people: [{ name: null, count: null }]
}

handleSubmit = (e) => {
    this.setState(({ count }) => ({
        count: count + 1
    }));
    this.props.addHuman(this.state);
}

addHuman = (human) => {

    let people = [...this.state.people, human];

    this.setState({
      people: people
    });    
}

我希望找到能够检查数组中是否存在重复项的解决方案

Answer 1

您可以检查数组中是否已存在同名的人。更好的检查属性是电子邮件地址。

find采用回调函数作为参数。在这个函数中，我比较名称属性。如果匹配，find则返回true，然后在下一行中提前返回，并且不会添加此人。

addHuman = (human) => {
    const exists = this.state.people.find(p => p.name === human.name);
    if (exists) return;
    let people = [...this.state.people, human];

    this.setState({
      people: people
    });    
}

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/find