javascript - 对象分配和传播运算符会改变 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{} 和对象传播不会深度克隆对象。

它将变异 steps。

它在以下线程中讨论:

How do I correctly clone a JavaScript object?