javascript - 状态变量的变化不可预测 - ReactJS

Question

这个问题已经有答案了:

Is this a good way to clone an object in ES6? (11 个回答)

What is the most efficient way to deep clone an object in JavaScript? (67 个回答)

已关闭 3 年前。

我是 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 CopyState = JSON.parse(JSON.stringify(yourState))

更好的解决方案

从源头解决。不要制作深层状态，它实际上是在状态中写入对象的关键部分。你应该把它们保持得很浅。在这种情况下，您已经深入了解 Obj -> Array -> Obj。