Javascript 当从对象中删除元素时，它从react js中的父元素中删除

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

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.columnsForModule=[{columnName:“ABC”，columnType:“BCD”}， {columnName:“BCD”，columnType:“KIO”}，{columnName:“BHY”，columnType:“NJH”}]

---

这里我的问题是，当从

columnModule[m][Key]

中删除它时，它也从根对象中删除，也就是

this.state.Columns

，我不想这样做。

在进行任何更改之前，您需要克隆对象，因为javascript对象是通过引用工作的。您可以使用来制作浅拷贝。但是，由于您试图修改嵌套数据，因此需要执行深度克隆

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

---

现在它也从根目录中删除了“this.state.Columns”谢谢Shubham，它现在可以工作了。当我从引用中删除时，它也从父对象中删除，因为javascript对象是按引用工作的。这是逻辑吗？但在其他地方，我已经直接从参考中删除了，它不会影响。感谢您的帮助。是的，它通过引用工作，并且在删除或修改对象之前不进行复制的地方会产生影响。spread运算符生成一级深度副本，因此即使在写入

[…this.state.Columns]

时，各个列对象键/值仍指向与原始列中相同的引用，因此需要执行深度克隆

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