Question

我有以下方法比较两个数组，一个来自道具，另一个来自我自己的组件。我的 props 数组中存在但不存在于我的 components 数组中的每个元素都插入到第三个数组中，并添加了名为“destroy : true”的属性，以便我可以将其发送到后端以从数据库中删除。

然而，无论出于何种原因，我的道具都被更新，而不是我在方法中使用的变量来完成所有这些。我不确定为什么，因为我没有直接引用 prop，但我确实将其内容复制到方法中的变量中。

     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 
},

为什么会发生这种情况？除了这个，我的组件中的所有其他元素都可以正常工作。

Answer 1

是的，您正在将 this.props.array 数组的元素复制到方法本地的新数组中，但鉴于数组的元素是对象，两个数组都在最后包含相同对象 (references to the objects)

您可以使用扩展运算符 let newElement = { ...element } 创建原始元素的浅拷贝 - 这将创建全新的对象并复制原始对象的所有属性。但请注意，如果原始对象的任何属性包含数组/对象，则您会遇到同样的问题……仅低一级

即使我是方法变量，vueJs 也会更新道具

1 个答案: