Question

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

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

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

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

Answer 1

有几种选择：

使用具有一些优秀update immutability helper，

docs on the React site

使用像clone这样针对此类优化的软件包。

我建议第一个，因为语法特别强大，特别是在处理像Redux商店这样的大型结构时。

作为文档的一个例子：

import update from 'immutability-helper';

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

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

Answer 2

最简单的捷径是：

const clone = JSON.parse(JSON.stringify(state));

总而言之，这涉及克隆对象的问题，那里有关于该主题的几个答案，具体取决于：

源对象中有函数引用，
是否涉及dom元素，
日期对象，
以及......

但是在这种情况下，你正在处理一个“普通的json对象”，因为它是redux状态，所以上面的方法都可以。

另一种方法是复制所有嵌套数据的递归函数，但如上所述，在这种情况下你不必这样做，因为你不必担心dom元素或其他东西。

React / Redux - 如何制作深度嵌套状态的副本？

2 个答案: