突变对象的克隆是对从父组件传递下来的原始对象道具进行突变

Question

我有一个父组件，该组件将数据数组传递给子对象，然后该子对象从数组中选择一个对象，对其进行克隆，变异并将其设置为状态。

我遇到的问题是，当我对克隆进行突变时，它实际上也在对数组prop内部的对象进行了突变。看来它实际上并没有被克隆，但仍被用作参考。

我目前正在使用React 16.7.0a，但我怀疑这与它有什么关系。

const dummyDomain = { ...domains[domains.length - 1] }
const newDomain = Object.assign({}, dummyDomain)
newDomain.basics.name = 'please dont change the original object'

上面的代码在子组件挂载时运行，当我安装子组件时，我用react dev工具检查父组件，数组中的原始对象已被更改。

我从没遇到过React的问题，这就是为什么我之前提到我正在使用React 16.7.0a的事实。很明显，我不是直接引用该对象，而是实际上创建了一个新对象，那有什么用呢？

Answer 1

因此，您有两种处理方式。不引入第三方库的方法是使用对象深层副本。

const newDomain = JSON.parse(JSON.stringify(dummyDomain));

否则，您可以轻松地将不可变数据移动到诸如immutable.js之类的东西（在后台进行此类操作）。