使用扩展运算符仍意外修改React State，为何需深拷贝？

你遇到的问题核心是扩展运算符做的是浅拷贝，而非深拷贝，具体原因拆解如下：

1. 浅拷贝的局限性
   {...selectedStatParams}这种写法只会复制对象的第一层属性。对于selectedStatParams里的嵌套对象/数组（比如parentSuggestions、childSuggestions），拷贝后的selectedStatParamsCopy里的这些属性，依然和原状态里的对应属性指向同一个内存地址。

2. 你的代码里的具体影响

• 你用selectedStatParamsCopy.parentSuggestions.slice(...)得到的新数组，只是原数组的浅拷贝——数组本身是新的，但数组里的每个parentSugg对象还是原状态里的对象引用。
• 所以当你在map里修改parentSugg.childSuggestions.isActiveCheckBox或者parentSugg.isAbsenceOfPatientInfoChecked时，本质上是直接修改了原状态里的嵌套对象，自然会导致状态意外变化。

3. 深拷贝能解决的原因
   深拷贝会递归复制所有层级的嵌套对象和数组，新生成的对象和原状态完全没有共享的引用。这时候修改新对象的任何属性，都不会波及原状态，符合React状态不可直接修改的要求。

可选的深拷贝方式 #

• 简单场景可以用JSON.parse(JSON.stringify(selectedStatParams))，但注意这种方法无法复制函数、Symbol等特殊类型：

  const selectedStatParamsCopy = JSON.parse(JSON.stringify(selectedStatParams))
  

• 如果项目里有lodash，可以用_.cloneDeep(selectedStatParams)，支持所有类型的深拷贝。

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