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

Posted 2023-03-29

【中文标题】ReactJS - 状态数组中的重复对象保持链接

【英文标题】：ReactJS - Duplicated objects in state array remain linked

【发布时间】：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] );

【参考方案1】：

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