對象分配和傳播運算符會改變 React 狀態嗎？

Question

我想知道我是否做錯了什么，因為據我所知： Object.assign 和 spread 運算符將創建新對象，因此我們可以避免改變內部狀態是一種不好的做法。 但在我的項目中，這兩個似乎不起作用。

首先，在我的構造函數中，我將狀態設置如下：

this.state = {
  article: {
    title: "",
    alias: "",
    category: "JAVA",
    steps: [
      {
        stepId: 1,
        title: "Dummy title",
        description: "The quick brown fox jump over the lazy dog",
        length: 30
      }
    ]
  },
  description: "",
  newStep: {
    title: "",
    length: 0
  }
}

后來，我添加了一個 addStep() 函數：

addStep() {

  console.log(this.state.article.steps);

  let article = { ...this.state.article };

  article.steps.push({
    stepId: _.last(this.state.article.steps).stepId + 1,
    title: this.state.newStep.title,
    length: this.state.newStep.length,
    description: "",
  });

  console.log(this.state.article.steps);
}

結果如下：

如您所見， this.state.article.steps已發生變異。 Object.assign 也是如此。 最后我決定使用，這解決了我的問題。

let article = JSON.parse(JSON.stringify(this.state.article));

結果：

Answer 1

Object.assign{}和 object spread 不會深度克隆對象。

它會改變steps 。

它在以下線程中討論：

如何正確克隆 JavaScript 對象？

Answer 2

let article = { ...this.state.article }; 只是制作對象的淺拷貝。 您可以使用以下內容手動制作新的子鍵：

let article = {
  ...this.state.article,
  steps: [...this.state.article.steps]
};

有很多方法可以處理試圖克隆深度嵌套對象的問題。 這只是其中之一。

Answer 3

您可以傳播原始狀態this.state.article並用另一個傳播覆蓋嵌套值（如steps ）。

let article = {
  ...this.state.article,
  steps: [...this.state.article.steps]
};