Question

我对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。我该如何实现？

Answer 1

由于您的变量a拥有对testState的引用，因此状态发生了变化。这是无人值守。您永远不要直接更改它，而只能使用react提供的setState函数。

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

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

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

Answer 2

为什么这样做？

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

解决方案

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

进一步阅读

Mozilla Web文档：Spread syntax

Answer 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）。

Answer 4

您可以使用传播运算符创建对象的副本

const newObj = {...obj};

Answer 5

使用JS，当您将对象影响到变量（此处为testState）时，该对象将通过引用传递（有关更多说明，请参见here）。

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

要解决您的问题，可以使用散布运算符，该运算符将复制对象而无需直接引用它：

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

Answer 6

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

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

Answer 7

尝试：

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

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

当其分配的变量更改时，反应状态也会更改

7 个答案: