为何修改React的state1会同时影响state2？

核心原因：引用类型的共享引用 #

你在useEffect中创建了数组a，并同时将它赋值给state1和state2。由于数组是引用类型，state1和state2实际上指向内存中的同一个数组对象，数组内部的{num: 1}对象也是同一个引用。这就意味着，无论通过哪个状态去修改这个共享对象的属性，另一个状态都会同步看到变化。

浅拷贝的局限性 #

点击"Change"按钮时，你用const temp = [...state1]复制了数组，但这只是浅拷贝：它只复制了数组本身的引用（所以setState1(temp)会让state1指向新数组），但数组里的元素（那个Obj对象）仍然是原来的引用。当你修改temp[0].num = 100时，实际上修改的是内存中那个被state1和state2共同引用的对象，因此state2的值也会跟着改变。

修复方案 #

方案1：初始化时使用独立的对象/数组

避免让两个状态共享同一个引用，初始化时分别创建独立的数组对象：

useEffect(() => {
  setState1([{num: 1} as Obj]);
  setState2([{num: 1} as Obj]);
}, [])

方案2：修改时深拷贝内部对象

修改state1时，不仅复制数组，还要深拷贝数组内的对象，切断引用关联：

onClick={() => {
  if (state1 == null) return
  // 复制数组的同时，复制每个内部对象
  const temp = state1.map(item => ({...item}));
  temp[0].num = 100;
  setState1(temp)
}}

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