javascript - 从对象中删除元素时，它会从 React js 中的父元素中删除

Question

我有一些状态数据，在一个方法中我试图从那个状态数据中删除一些东西，所以我已经将该状态数据分配给一个变量并从该变量中删除一些数据，但是它从那个状态对象中删除我不想，为什么会发生这种情况以及如何阻止这种情况。

this.state.Columns = [{columnName: "ABC", columnType: "BCD", moduleName: "OIU"},
                        {columnName: "BCD", columnType: "KIO", moduleName: "NHJ"},
                            {columnName: "BHY", columnType: "NJH", moduleName: "MKO"}]

let {columnsForModule} = this.state;                        
let columnForModule = this.state.Columns;

let columnsByModule = Lodash.groupBy(columnForModule, "moduleName");

moduleItems= ["MKO","NHJ","OIU"];


for(var i = 0 ; i < moduleItems.length ; i++){
      if(columnsByModule[moduleItems[i]]){

        let columnModule = columnsByModule[moduleItems[i]];
        for(var m=0;m<columnModule.length;m++){
          var key = "moduleName";
          console.log(columnModule[m]);
          columnModule[m] = delete columnModule[m][key];
          columnsForModule.push(columnModule[m]);
        }
      }
    }

在我想要的所有迭代之后，

this.state.Columns = [{columnName: "ABC", columnType: "BCD", moduleName: "OIU"},{columnName: "BCD", columnType: "KIO", moduleName: "NHJ"},{columnName: "BHY", columnType: "NJH", moduleName: "MKO"}]

this.state.columnsForModule = [{columnName: "ABC", columnType: "BCD"}, {columnName: "BCD", columnType: "KIO"},{columnName: "BHY", columnType: "NJH"}]

我的问题是，从 columnModule[m][Key] 中删除时，它也会从根对象中删除，也就是 this.state.Columns，我不想要这个。

Answer 1

您需要在进行任何更改之前克隆该对象，因为 javascript 对象是通过引用工作的。您可以使用 spread operator syntax做一个浅拷贝。但是，由于您正在尝试修改嵌套数据，因此需要进行深度克隆。

let columnsForModule = [...this.state.columnsForModule];                        
let columnForModule = this.state.Columns.map(column => ({...column})); // deep copy