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

我有一个看起来像这样的深度嵌套Redux的状态：React/Redux - 我如何制作深度嵌套状态的副本？

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

我需要它的副本，这样我就可以方便地修改它，然后用它来取代原本的状态。

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

来源

2017-04-26 Ray Alez

为最简单的快捷方式是：

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

总而言之，涉及克隆对象的问题，有几个关于这个问题的答案在那里，这取决于东西，如：

在那里发挥作用在源对象的引用，
是有DOM涉及的元件，
Date对象，
更多...

但是在这种情况下，你是在处理一个»纯JSON对象«，因为它是终极版状态，所以上述方法会奏效。

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

来源

2017-04-26 13:35:41 philipp

我认为Redux建议该对象一般可序列化。然而，'JSON.parse'的一个重要警告（因为函数可能不应该是状态的一部分）是'Date'（de）序列化。 – CodingIntrigue

我更新了我的答案，并将日期对象添加到列表中。然而，这绝对是“快速和肮脏”的方法，但如果你知道没有任何“复杂”的成员，它将工作没有太多的代码。 – philipp

有几个选项：

使用其中有一些优秀的docs on the React site的update immutability helper，
使用包像这对这种事情进行了优化。

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

正如从文档的例子：

import update from 'immutability-helper'; 

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

让您无需担心现有对象危险的突变修改深度嵌套的特性。

来源

2017-04-26 13:38:33

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

回答

相关问题