在 React 中，如何按值复制状态属性？答案

【问题标题】：In React, how do I copy a state property by value?在 React 中，如何按值复制状态属性？
【发布时间】：2020-10-24 09:40:45
【问题描述】：

我正在构建一个 React 16.13 应用程序。我想从我的状态中复制一个属性，以便对其进行操作并使基础状态保持不变。我认为这是这样做的方法...

  async handleFormSubmit(e) {
    e.preventDefault();
    const NC = [...this.state.newCoop]
    delete NC.addresses[0].country;

    try {
      const response = await fetch(FormContainer.REACT_APP_PROXY + "/coops/", {
        method: "POST",
        body: JSON.stringify(this.state.newCoop),
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
      });

不过这一行

const NC = [...this.state.newCoop]

给出错误

Unhandled Rejection (TypeError): this.state.newCoop is not iterable

按值复制状态变量的正确方法是什么？

【问题讨论】：

什么是this.state.newCoop？您似乎以两种不同的方式处理它 - 当您复制它时作为一个数组，当您访问 NC.addresses 时作为一个对象。另请注意，[...thing] 只是一个浅副本，因此delete NC.addresses[0].country 也会改变原始副本。
"newCoop" 是我所在州的一个对象。我应该在我的问题中包含它的属性吗？我想通过值而不是引用来复制它，但还没有弄清楚如何做到这一点。
如果它是一个对象，为什么要将它传播到一个数组中？是的，请始终提供minimal reproducible example。
我试图按照这里的建议按值复制对象 -- stackoverflow.com/questions/51444827/… ，但这个解决方案显然不正确，或者不知何故不适用于我的情况。
他们正在复制一个数组，根据欺骗标题，而你说你没有数组。

标签： reactjs copy react-state

【解决方案1】：

我认为这只是因为您将一个对象传播到一个数组中；做吧：

const NC = {...this.state.newCoop}

编辑：

关于深拷贝问题，你可以看看这个答案： https://stackoverflow.com/a/38417085

顺便说一句，这与 react 无关 :)

【讨论】：

我是这样试的，但是我觉得NC的值不是深拷贝，而是this.state.newCoop变量的浅拷贝。当我运行“删除 NC.addresses[0].country;”时然后打印出“this.state.newCoop.addresses[0].country”，打印出的是未定义的，而在删除之前，“this.state.newCoop.addresses[0].country”中有一个值.
@Dave 是的，正如我上面所说，这是一个浅副本
是的，但是根据我的问题标题，我想知道如何按值而不是按引用进行复制。如果有更好的方式来表达我的问题，请告诉我，以免其他人感到困惑。
啊，好电话。这个 FE 的东西让我无休止地困惑。但是您链接中的“const NC = JSON.parse(JSON.stringify(this.state.newCoop))”成功了！
请注意 JSON.parse 解决方案并不总是安全的（请查看 @jonrsharpe 在另一条评论中提到的 stackoverflow.com/a/122704/653325）。