React更新单个state时未触发setter的state同步变更问题排查

这是JavaScript典型的浅拷贝引用共享问题，和React状态机制本身无关：

1. 你用[...productProperties]仅创建了数组的第一层浅拷贝，数组内部存储的PropertyGroup对象仍然是引用地址，和原状态（包括originalProductProperties中存储的对应对象）指向堆内存中同一块数据。
2. 你执行update[i].name = xxx的操作，本质是直接修改了两个状态数组共同引用的同一个对象，哪怕没有调用setOriginalProductProperties，原始状态的值也会被同步篡改。
3. 大概率你初始化状态时，也直接把同一份接口返回值同时赋值给了两个状态，比如类似setProductProperties(res.data); setOriginalProductProperties(res.data)的写法，从初始化阶段两个状态就共享了同一份对象引用，进一步放大了浅拷贝修改的串改问题。

方案1：状态更新时做逐层不可变更新（推荐，性能最优） #

更新productProperties时，不要直接修改浅拷贝数组里的原对象，而是对更新路径上需要修改的节点全部创建新的引用，未修改的节点可以保留原引用，不会影响性能：

(e, itemId) => {
  if (!productProperties) return;
  const updatedList = productProperties.map(group => {
    // 匹配到要修改的分组时，返回全新的对象副本
    if (group.id === itemId) {
      return {
        ...group,
        name: {
          ...group.name,
          [selectedLocale]: e.currentTarget.value
        }
      }
    }
    // 不需要修改的分组直接返回原引用即可
    return group;
  });
  setProductProperties(updatedList);
}

方案2：初始化时做引用隔离 #

在接口返回数据初始化两个状态的阶段，就对两份数据做深拷贝，从根源上避免两个状态共享对象引用：

// 接口请求拿到原始数据后
const propertyData = await fetchProductPropertyData();
// 用结构化克隆做深拷贝，兼容现代浏览器和Node17+环境
setProductProperties(structuredClone(propertyData));
setOriginalProductProperties(structuredClone(propertyData));

如果你的运行环境不支持structuredClone，或者数据里包含函数、循环引用等特殊结构，可以引入工具库的深拷贝方法（比如lodash的cloneDeep）处理，注意非必要不要做高频全量深拷贝，会产生额外性能开销。

注意：React官方要求状态更新必须遵循不可变数据原则，直接修改嵌套引用哪怕触发了setState，也可能导致依赖比对异常、渲染不触发、原始状态被篡改等隐性问题。

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