ReactJS - 状态数组中的重复对象保持链接答案

【问题标题】：ReactJS - Duplicated objects in state array remain linkedReactJS - 状态数组中的重复对象保持链接
【发布时间】：2021-11-09 15:11:59
【问题描述】：

我已在以下代码框中重现了该问题： https://codesandbox.io/s/unruffled-danilo-mbb0e?file=/src/App.js

我有一个对象状态数组[{name:"Tom"},{name:"Dick"},{name:"Harry"}]。我希望能够复制存在于数组中特定索引处的对象。我在沙盒中提供了一个“复制”按钮。

在沙盒中按照以下步骤重新创建问题：

单击“Dick”下的 Duplicate 以复制状态数组中的 Dick 对象
现在单击两个迪克斯之一下的“更改”。请注意，我的代码只更改了状态数组中的一个“Dick”对象，但另一个重复的对象会自动更改。

我想避免这种情况。我不希望两个 Dick 对象永远保持联系。我该怎么做？

【问题讨论】：

这就是 javascript 的工作原理。您必须 deep copy 对象。
第 14 行 copy.splice(index, 0, { ...cur[index] });

标签： javascript arrays reactjs duplicates

【解决方案1】：

你在浅拷贝数组。你需要深拷贝。将let copy = cur.slice(); 替换为let copy = cur.map(item => {return {...item}});，您的代码应该可以工作。基本上我们需要解构内部对象以获得数组中每个对象的新副本。你可以在这里阅读Object Immutability in JS

【讨论】：