React Native 未触发setState时State及源数据意外更新问题咨询

出现所有引用同步修改的核心本质是浅拷贝仅复制数组顶层的内存引用，完全没有隔离数组嵌套层级里的对象共享引用。

完整的引用链路如下：

• 初始化阶段执行const [state, setState] = React.useState({options: filterData})时，state.options存储的并不是filterData的独立拷贝，而是和filterData指向完全相同的堆内存对象引用
• handleSelect内执行let arr = [...state.options]时，数组展开语法只完成了顶层数组的浅拷贝：会生成一个全新的空数组，将原数组中每个元素的内存引用原封不动复制到新数组arr中。此时arr、state.options、filterData三个顶层数组的引用地址确实不同，但三个数组内部存储的每一个带Type、List字段的对象，全都是指向同一块堆内存的共享引用
• 遍历匹配对应Type、翻转目标List元素isSelected属性时，操作本质是直接修改了被所有引用共享的嵌套List对象的属性。不管是从arr读取这个对象、从state.options读取、还是从源头filterData读取，拿到的都是同一个对象的指针，修改操作完成后，所有持有该引用的变量读到的内容自然完全一致。

浅拷贝的常见认知误区 #

绝大多数开发者会把顶层数组展开的浅拷贝当成全量数据隔离，实际的引用隔离边界仅存在于最外层数组：

• 三个顶层数组本身是独立的：arr !== state.options !== filterData的判断结果为真
• 数组内的所有嵌套层级是完全共享的：arr[i] === state.options[i] === filterData[i]的判断结果为真，包括每个项内嵌套的List数组、List数组中的每一个选项对象，全都是无隔离的共享引用

你可以在handleSelect函数中加一行打印直接验证引用关系：
console.log(arr[0] === state.options[0] === filterData[0])
输出结果一定为true，直接证明嵌套对象的引用没有做任何隔离，所有指向该对象的变量都能读到修改后的最新属性。

规范的隔离实现要求 #

要做到修改操作不污染原状态和源头数据，操作嵌套属性时必须同步生成新的对象引用，不能直接修改原共享对象：

• 匹配到对应Type的顶层项时，不要直接修改原对象，要先生成该顶层项的独立浅拷贝
• 处理嵌套的List数组时，要为List生成独立的浅拷贝，不要直接修改原List数组
• 翻转isSelected属性时，要为目标List子项生成独立拷贝再修改属性，最后将所有拷贝逐层拼接成新的state结构完成更新

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