React状态变量意外变更求助：修改副本不影响原状态

嘿，我明白你遇到的问题了——这是React里很常见的浅拷贝坑！你用{ ...this.state.testState }确实复制了外层的对象，但里面的testArray以及数组里的每个对象，其实还是和原state共享着引用。所以当你在map里修改obj.name时，你其实是在修改原state里的对象本身。

怎么解决？ #

你需要做的是深拷贝数组里的每个对象，确保修改的是新的引用，而不是原state里的对象。最简单的方式是在map遍历的时候，返回一个新的对象：

testFn = () => { 
  let a; 
  // 拷贝外层对象，同时对testArray里的每个元素做对象展开，生成新对象
  a = { 
    ...this.state.testState,
    testArray: this.state.testState.testArray.map(obj => ({
      ...obj, // 拷贝原对象的所有属性
      name: "React is awesome" // 覆盖name属性
    }))
  };
  console.log(this.state.testState); // 现在原state完全不会被修改啦！
  console.log(a); // 这里是修改后的新对象a
}

为什么这样有效？ #

• { ...this.state.testState }拷贝了外层的testState对象，避免直接修改原对象引用；
• map里的({ ...obj, name: "React is awesome" })会为数组里的每个元素创建一个新的对象，而不是修改原对象的属性，这样原state里的数组元素就不会被影响。

其他可选方案（注意局限性） #

如果你处理的是更复杂的嵌套对象，可以用JSON.parse(JSON.stringify(this.state.testState))做深拷贝，但这种方法有一些限制：它无法处理函数、Symbol类型、循环引用等场景，所以对于你的这种简单结构，上面的map+对象展开是更稳妥的选择。

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