Javascript 对象分配和扩展运算符的变化反应状态？

我想知道我是否做错了什么，因为据我所知：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);
}

结果如下：

如您所见，这个.state.article.steps已经发生了变化。Object.assign也是如此。最后我决定使用，这解决了我的问题

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

结果:

---

让article={…this.state.article}仅制作对象的浅拷贝。您可以使用以下内容手动创建新的子键：

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

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

有许多方法可以解决尝试克隆深度嵌套对象的问题。这只是其中之一。
对象。分配{}
和对象扩展不会深度克隆对象

它将变异
步骤

这将在以下线程中讨论：

您可以将原始状态
扩展到this.state.article
，并用另一个扩展覆盖嵌套值（如
步骤
）