React Hook状态未调用setState却意外更新问题咨询

问题根源 #

这是JavaScript引用类型的特性导致的，和React本身的机制无关：

• React的状态值如果是数组、对象这类引用类型，变量存储的只是数据在内存中的地址，而非数据本身。你写的const dataHolderTest = dataSet2并没有生成新的数组，只是把dataSet2指向的内存地址赋值给了dataHolderTest，二者本质指向的是完全相同的数据。
• 你后续调用的splice是数组的原地修改方法，会直接修改操作对象本身的内容。你把dataHolderTest[1]（也就是dataSet2[1]对应的子数组）传入removeAllSelectedTeams后，直接对这个传入的数组执行splice操作，相当于直接修改了dataSet2的原始值，哪怕你没有调用setDataSet2，数据也已经被你原地篡改了。

修复方案 #

修改引用类型的状态前，必须先拷贝生成新的引用，避免修改原始状态：

1. 拷贝整个二维数组再操作，保证和原始状态完全隔离：

// 对二维数组做浅拷贝，外层和内层数组都生成新的引用
const dataHolderTest = dataSet2.map(weekArr => [...weekArr])

2. 也可以在操作子数组前先拷贝，避免修改原数据：

// 传入拷贝后的新数组，splice只会修改新数组，不会影响原始状态
removeAllSelectedTeams(newSelections, [...secondWeekTest], team2)

注意事项 #

React的setter方法的作用只是触发组件重渲染，并不会限制你手动修改状态的原始值。原地修改状态属于React的违规用法，轻则导致状态不可预期，重则会出现重渲染不触发、视图和状态不一致的问题，所有状态修改都必须通过setter传入新的引用值完成。

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