状态变量不可预测地变化 - ReactJS

Question

我是 React 的新手。我需要一些帮助来解决这个问题代码： this.state={    testState: {        testArray: [            { name: "bob" },            { name: "alice" },            { name: "john" }        ]    }}testFn = () => {        let a;        a = { ...this.state.testState }; //using spread operator to copy the object instead of referencing        a.testArray.map((obj) => {            obj.name = "React is awesome"        })        console.log(this.state.testState)    }输出：testArray: Array(3)0: {name: "React is awesome"}1: {name: "React is awesome"}2: {name: "React is awesome"}我必须在a不改变状态的情况下进行修改。但是在这里，状态也随着迭代而改变。我怎么解决这个问题？

Answer 1

扩展运算符只做一个浅拷贝

为了保证完整的对象副本使用

const copiedState = JSON.parse(JSON.stringify(yourState))

更好的解决方案

从源头解决。不要做深度状态，它实际上是在状态中写入对象的关键部分。你应该让它们很浅。在这种情况下，您已经深入使用 Obj -> Array -> Obj。