如何克隆反应状态数组而不进行更改？

Question

如何在不修改原始状态的情况下将反应状态从一个克隆到另一个？

我想做的是在过滤数据时要更改原始状态的状态，并在重置时希望将其替换为原始状态的副本。

我尝试使用myArray.slice（）;可以。.但是当我进行更改时，它仍在重写我的状态。

如何解决此问题？有可能吗？

谢谢。

Answer 1

解决方案

const arr = [{a: 1}]
const copy = arr.map(item => ({...item})) 

---

说明：

听起来像是参考问题。 （浅层副本与深层副本）

首先，让我们看看引用是如何工作的。

const arr = [{a: 1}]
const copy = arr // we assign copy as refernce to arr

copy.push({b:2}) // push item to copy array.
console.log(arr) // [{a: 1}, {b: 2}]
console.log(copy) // [{a: 1}, {b: 2}]

好的，我们想克隆该数组，但是我们想创建一个新的数组（浅拷贝）。

const arr = [{a: 1}]
const copy = Array.from(arr) // return shallow-copied, [ref][1]

copy.push({b:2})
console.log(arr) // [{a: 1}]
console.log(copy) // [{a: 1}, {b: 2}]

但是问题是数组和对象要么按引用存储，所以当您克隆（浅）数组时，内部的对象按引用存储。这意味着，即使克隆数组并创建一个新数组，副本内部的对象也具有相同的引用。

让我们看一下示例。

const arr = [{a: 1}]
const copy = Array.from(arr)

copy.push({b:2})
copy[0].a = 3
console.log(arr) // [{a: 3}]
console.log(copy) // [{a: 3}, {b: 2}]

您可以看到它不是相同的数组，但是对象是相同的（通过引用）

因此您需要深层复制而不是浅层复制，您可以阅读有关here

的信息

您可以使用lodash来深克隆deepClone方法。

或者您可以使用ES6

const arr = [{a: 1}]
const copy = arr.map(item => ({...item})) // ES5: arr.map(item => object.assign({}, item))