javascript - React 将唯一对象推送到数组中

Question

我有一个函数应该向数组添加唯一元素:

addLanguage = (val) => {

    for(let i=0; i< val.length; i++){
        console.log(val[i].id)
        if(this.state.createNewDeliveryData.languages.indexOf(val[i].id === -1)){
             this.state.createNewDeliveryData.languages.push(val[i])
        }
    }
}

参数“val”每次都会获取一个带有附加元素的数组(我在 UI 上有一个多选框，从中添加语言)，这就是为什么在 If 循环中我试图检查我的语言数组是否已经具有该特定的元素。然而这没有效果，最后我的语言数组包含相同的元素，即在后续调用中添加相同的元素两次或三次等。

['German']
['German', 'German', 'Arabic']
...

我做错了什么？

Answer 1

您正在数组中查找 false 的索引。这是因为，indexOf(val[i].id === -1) 将始终检查 indexOf(false) 是否为 -1。所以你重新添加每种语言。

您可能正在寻找与此更相似的算法:

addLanguage = (val) => {
    // Get a copy of the languages state. 
    const languages = [...this.state.createNewDeliveryData.languages];
    for(let i=0; i< val.length; i++){
        if(languages.indexOf(val[i].id) === -1) { // notice that there is a parenthesis after `id`.
            languages.push(val[i].id)
        }
    }
    this.setState({createNewDeliveryData: {languages}}); // update state and trigger re-render if there are new languages. 
}

请注意，您应该始终使用 setState 来改变 React 中的状态。