將對象推入數組時，如何不將同一對象推入數組？

Question

我正在使用復選框中選中的對象創建新數組。 但是，當我再次提交時，出現錯誤“ flattenChildren（...）：遇到兩個具有相同鍵的子項.$3子鍵必須是唯一的；當兩個子項共享一個鍵時，只會使用第一個子項。” 我只想推送唯一的對象。

我正在使用反應

handleSubmit(){

    let students = []
    for(let idx in this.state.checked){
        if(this.state.checked[idx] ){
            students.push(this.state.allStudent[idx])
        }
    }
    console.log('students', students)
    this.setState({
        studentList: update(this.state.studentList, {$push: students})
    })

}

Answer 1

使用React時，您應該能夠安全地使用ES6設置對象，該對象可以存儲任何類型的唯一值。 （ https://devdocs.io/javascript/global_objects/set ）。

例如

handleSubmit(){

let students = []
for(let idx in this.state.checked){
    if(this.state.checked[idx] ){
        students.push(this.state.allStudent[idx])
    }
}

students = [...new Set(students)];

console.log('students', students)
this.setState({
    studentList: update(this.state.studentList, {$push: students})
})

}

Answer 2

我不是React.js的專家，但這似乎是一個簡單的問題（僅將唯一元素推入JS數組）。 修改如下的函數應該可以工作：

handleSubmit(){
    let students = [...this.state.studentList];
    for(let idx in this.state.checked){
        if(this.state.checked[idx] && (students.indexOf(this.state.checked[idx]) === -1)){
            students.push(this.state.allStudent[idx])
        }
    }
    console.log('students', students)
    this.setState({
        studentList: update(this.state.studentList, students)
    })
}

我們在這里所做的基本上是在'students'數組上使用'indexOf（）'方法檢查數組中是否存在當前元素-如果在數組中找不到元素，則indexOf（）方法將返回-1。 希望這可以幫助！