當分配的變量發生變化時，React 狀態也會發生變化

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情況下修改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 網絡文檔： 傳播語法

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 ）時，它是通過引用傳遞的（參見這里的進一步解釋）。

這意味着如果您通過變量之一修改對象，則引用源的每個變量都將應用更改。

要解決您的問題，您可以使用擴展運算符，它復制對象而不直接引用它：

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)
    }