状态变量不可预测地变化 - 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。