I have the following method to compare two arrays, one from props and the other from my component. I insert every element that exists in the props array but not in my component array into a third array and add a property called "destroy: true" so I can send it to the backend Delete from database.
However, for some reason my props are updated instead of the variables I use in the method. I'm not quite sure why this is happening since I'm not referencing the prop directly, but I do copy its contents into a variable within the method.
updateArray(){
let updatedArray = []
let oldArray = [...this.props.array]
oldArray.forEach(element => {
if(this.componentArray.indexOf(element) > -1){
updatedArray.push(element)
}else{
let newElement = element
newElement.destroy = true
updatedArray.push(newElement)
}
})
return updatedArray
},
Why does this happen? The other elements in my component work fine, only this one has issues.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Yes, you are copying the
elementsof the this.props.array array into a new method local array, but since the elements of the array are objects, you end up with both The arrays all contain the same object (a reference to the object )You can use the spread operator
let newElement = { ...element }Create a shallow copy of the original element - this will create a completely new object and copy the original All properties. But be aware that if any properties of the original object contain arrays/objects, you will face the same problem...just a little deeper