javascript - React/Redux - 如何复制深度嵌套状态？

Question

这个问题已经有答案了:

How do I correctly clone a JavaScript object? (81 个回答)

已关闭 6 年前。

我有一个深度嵌套的 redux 状态，如下所示:

{
    name: "Item One",
    children: [
    {
        name: "Item Two"
        children: [
            ....
        ]
    },
    {
        name: "Item Three",
        children: [
            ....
        ]
    }
    ]
}

我需要制作它的副本，以便我可以方便地修改它，然后用它替换状态。

不幸的是，仅使用 {...state} 不起作用，因为所有嵌套子级都没有被复制，它们仍然引用相同的对象。有没有方便的解决方法？

Answer 1

有几个选项:

1. 使用update immutability helper其中有一些优秀的docs on the React site ,
2. 使用类似 clone 的包它针对此类事情进行了优化。

我推荐第一个，因为语法特别强大，尤其是在处理像 Redux 存储这样的大型结构时。

作为文档中的示例:

import update from 'immutability-helper';

const newData = update(myData, {
  x: {y: {z: {$set: 7}}},
  a: {b: {$push: [9]}}
});

允许您修改深层嵌套的属性，而不必担心现有对象上的危险突变。