React中修改变量意外删除state父元素的原因及解决方法

这问题我之前踩过坑，核心原因其实是JavaScript里对象/数组的引用特性在搞鬼！

原因分析 #

你把this.state.Columns赋值给变量的时候，并没有复制出一份全新的数组/对象，只是把原state对象的内存引用地址传给了这个变量。简单说，这个变量和this.state.Columns指向的是内存里同一个数据集合。所以你修改这个变量里的内容，本质上就是直接修改了原state的数据——这不仅会导致意外的状态变更，还违反了React里不能直接修改state的基本原则。

举个你场景里的错误示例：

// 你可能写了类似这样的代码
let columnsForEdit = this.state.Columns;
columnsForEdit.splice(1, 1); // 删除数组中的某一项
// 这时候你会发现this.state.Columns里的数据也被删掉了！

解决方法：创建原数据的拷贝再修改 #

要避免这个问题，你需要先创建一份原state数据的独立拷贝，再修改这个拷贝，最后用setState更新state。根据你的数据结构，这里有几种可行方式：

1. 浅拷贝（适合你的数组结构，若数组元素无嵌套对象足够用）

• 使用扩展运算符：

// 先拷贝原数组，生成独立的新数组
let columnsForEdit = [...this.state.Columns];
// 对拷贝后的数组执行修改操作，比如删除指定项
columnsForEdit.splice(2, 1); // 示例：删除第三个元素
// 最后通过setState更新state
this.setState({ Columns: columnsForEdit });

• 使用Array.from()：

let columnsForEdit = Array.from(this.state.Columns);
// 执行修改操作...
this.setState({ Columns: columnsForEdit });

2. 深拷贝（如果数组元素里还有嵌套对象/数组，浅拷贝会有同样的引用问题）

可以用JSON.parse(JSON.stringify())（注意：这种方法不适合包含函数、Symbol、undefined的对象）：

let columnsForEdit = JSON.parse(JSON.stringify(this.state.Columns));
// 执行修改操作...
this.setState({ Columns: columnsForEdit });

如果你的数据结构复杂，也可以用Lodash的_.cloneDeep()方法，不过对于你的场景，上面的方法已经足够。

关键提醒 #

永远不要直接修改this.state里的内容，必须通过setState来更新状态，这样React才能正确触发组件重新渲染，保证状态的可追溯性和组件的稳定性。

内容的提问来源于stack exchange，提问作者mohan