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

Posted 2023-02-22

【中文标题】React 状态在其分配的变量更改时更改

【英文标题】：React state changes when its assigned variable changes

【发布时间】：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 是一个对象，您正在修改它。您希望实现什么目标？

【参考方案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()