React 状态在其分配的变量更改时更改答案

【问题标题】：React state changes when its assigned variable changesReact 状态在其分配的变量更改时更改
【发布时间】：2020-06-21 03:14:00
【问题描述】：

我遇到了一个奇怪的 React 问题。

this.state={
      testState: { testValue: "Test State" }
}
   
testFn = () => {
        let a;
        a = this.state.testState
        a.testValue = "Debugging is awesome";
        console.log(this.state.testState)
    }

如果我对分配的变量a 进行了任何更改，那么它也会反映在状态中。

我在控制台中得到的是，

{testValue: "Debugging is awesome"}.

任何帮助将不胜感激

编辑： 我不想改变状态。我必须修改 a 而不改变状态。我怎样才能做到这一点？

【问题讨论】：

testState 是一个对象，您正在修改它。您希望实现什么目标？

标签： javascript reactjs state

【解决方案1】：

状态更改是因为您的变量 a 包含对 testState 的引用。这是一个无操作。千万不要直接改，只能使用 react 提供的setState 函数。

this.setState({ testState: { testValue: "Debugging is awesome" } });

如果您不想更改状态，可以使用扩展运算符：

let a = { ...this.state.testState };

【讨论】：

其实我不想改变状态。我必须修改'a'而不改变状态。我怎样才能做到这一点？

【解决方案2】：

为什么会这样？

这是因为 JavaScript 中的 objects 和 arrays 是参考值。无论您在何处更新其值，它都会更新源。在这种情况下，您希望使其不可变。您可以通过分配一个新对象来做到这一点。在 ES6 中，这可以通过 spread operator 来完成。

解决方案

let a = { ...this.state.testState };

进一步阅读

Mozilla 网络文档：Spread syntax

【讨论】：

【解决方案3】：

如果你不希望它受到影响，你必须深度复制状态（Object.assign）：

this.state={
  testState: { testValue: "Test State" }
}

testFn = () => {
    let a;
    a = Object.assign({}, this.state.testState);
    a.testValue = "Debugging is awesome";
    console.log(this.state.testState)
}

或者您可以使用{...this.state.testState} 代替Object.assign

请注意，使用扩展运算符 {...} 不会保留原型属性 (instanceof)。

【讨论】：

【解决方案4】：

您可以使用扩展运算符创建对象的副本

const newObj = {...obj};

【讨论】：

【解决方案5】：

使用 JS，当你将一个对象影响到一个变量时（这里是testState），它是通过引用传递的（更多解释见here）。

这意味着如果您通过其中一个变量修改对象，则引用源的每个变量都将应用更改。

为了解决您的问题，您可以使用扩展运算符，它复制对象而不直接引用它：

let a = {...this.state.testState}

【讨论】：

【解决方案6】：

尝试：

this.state={
      testState: { testValue: "Test State" }
}

testFn = () => {
        const a = { ...this.state.testState };
        a.testValue = "Debugging is awesome";
        console.log(this.state.testState)
    }

【讨论】：

【解决方案7】：

您必须为此使用扩展运算符 (...) 而不是直接分配。

this.state={
      testState: { testValue: "Test State" }
}
   
testFn = () => {
        let a;
        a = {...this.state.testState}
        a.testValue = "Debugging is awesome";
        console.log(this.state.testState)
    }
    
testFn()

【讨论】：