我有以下的方法來比較兩個數(shù)組,一個來自props,另一個來自我的組件。我將props數(shù)組中存在但在我的組件數(shù)組中不存在的每個元素插入到第三個數(shù)組中,并添加一個名為"destroy : true"的屬性,這樣我就可以將其發(fā)送到后端從數(shù)據(jù)庫中刪除。
然而,由于某種原因,我的props被更新了,而不是我在方法中使用的變量。我不太確定為什么會這樣,因為我沒有直接引用prop,但我確實將其內(nèi)容復制到方法中的變量中。
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 },
為什么會發(fā)生這種情況?我的組件中的其他元素都正常工作,只有這個有問題。
是的,你正在將this.props.array
數(shù)組的元素復制到一個新的方法本地數(shù)組中,但是由于數(shù)組的元素是對象,最終兩個數(shù)組都包含相同的對象(對象的引用)
你可以使用擴展運算符let newElement = { ...element }
創(chuàng)建原始元素的淺拷貝 - 這將創(chuàng)建一個全新的對象,并復制原始對象的所有屬性。但要注意,如果原始對象的任何屬性包含數(shù)組/對象,你將面臨相同的問題...只是深度更深一層