Javascript 在react中管理阵列道具

我有一个react应用程序，我发现了一个bug，我正在过滤一个数组以搜索用户选择的当前项目，然后我将用它做一些事情……但是，我不知道过滤函数返回对数组项目的引用，所以，我对所选项目所做的每一次更改都会对道具数组进行同样的操作

const pippo = maledettoArray.filter(item => item.id === idInfame)[0];

---

如何在不更改道具数组的情况下过滤道具数组以获取特定项目？

您可以使用

find

方法，而不是

filter

，后者返回第一个匹配项并退出循环

const pippo = maledettoArray.find(item => item.id === idInfame)

要创建对象的浅层副本，可以使用

object.assign

或spread语法

const clone = {...pipo}

---

如果要创建嵌套对象的深度副本，则可以使用Lodash

.cloneDeep（value）

方法。

可以使用

find

方法，而不是

filter

，后者返回第一个匹配并退出循环

const pippo = maledettoArray.find(item => item.id === idInfame)

要创建对象的浅层副本，可以使用

object.assign

或spread语法

const clone = {...pipo}

---

如果您想创建嵌套对象的深度副本，那么可以使用Lodash

.cloneDeep（value）

方法。

首先，我建议您使用

find

函数而不是filter，以避免在

[0]

其次，是的，将返回对象引用。为了避免这种情况，可以使用

Object.assign（{}，originalObject）

或使用扩展语法

{…originalObject}

。一个潜在的问题是嵌套对象，这可能仍然是一个问题。

---

在这种情况下，本文可能会对您有所帮助。

首先，我建议您使用

find

函数而不是filter，以避免在

[0]

其次，是的，将返回对象引用。为了避免这种情况，可以使用

Object.assign（{}，originalObject）

或使用扩展语法

{…originalObject}

。一个潜在的问题是嵌套对象，这可能仍然是一个问题。

---

在这种情况下，本文可能会对您有所帮助

看起来也是这样：如果我使用pippo.id=100，那么maledettoArray项也会有100Yes，因为对象是通过引用传递的，所以如果您想修改结果，您需要创建一个副本。请注意，{…obj}只创建一个浅层副本，因此，如果您有嵌套对象并修改了其某些属性，您仍然会更改原始属性。如果是嵌套对象，请使用lodash cloneDeep或查看此答案，看起来查找函数也在执行相同的操作：如果我执行pippo.id=100，那么maledettoArray项也将具有100Yes，因为对象是通过引用传递的，因此如果您希望修改创建副本所需的结果。请注意，{…obj}只创建一个浅层副本，因此，如果您有嵌套对象并修改其某些属性，您仍然会更改原始对象。如果是嵌套对象，请使用lodash cloneDeep或查看此答案，您不会更改发布代码中的项。考虑发布所有相关代码。您没有更改您发布的代码中的项。考虑发布所有相关代码。