I'm creating new array with objects checked in the checkbox. But when i submit again, there's a error "flattenChildren(...): Encountered two children with the same key, .$3
. Child keys must be unique; when two children share a key, only the first child will be used." I want push only unique objects.
I`m using react
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})
})
}
As you are using React, you should be able to safely use the ES6 Set Object, which lets you store unique values of any type. ( https://devdocs.io/javascript/global_objects/set ).
eg
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})
})
}
I am not an expert in React.js, but this seems to be a simple problem(pushing only unique elements to a JS array). Your function modified as follows should work:
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)
})
}
What we have essentially done here is use the 'indexOf()' method on the 'students' array to check if the current element exists in the array - the indexOf() method returns -1 if an element is not found in an array. Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.