React/js-复制数组并在不编辑原始数组的情况下进行编辑

Question

我正在尝试过滤一个数组，在新数组中传递结果，并在不更改原始数组的情况下编辑新数组。

代码如下：

const personalDocs = [{
"IDcard": false,
"passport": true,
"documentnumber": "1",
"dateofissue": ""
}, 
{
"IDcard": true,
"passport": false,
"documentnumber": "2",
"dateofissue": ""
}];

const passports = personalDocs.filter((doc) => doc.passport === true);
const passportsCollection = [...passports];
// tried:  const passportsCollection = passports.slice()
passportsColection.forEach(object => {
delete object['IDcard'];
object.taken = "YES";
});

console.log("ALL PERSONAL DOCS:")
console.log(personalDocs)      // this becomes same as passportsCollection :(
console.log("JUST PASSPORTS")
console.log(passportsCollection)

此处提供实时代码：https://codesandbox.io/s/agitated-wilson-p9w8kt?file=/src/App.js

这与javascript的基础知识或react有关吗？

谢谢。

Answer 1

这一行并没有做你认为它会做的事情：

const passportsCollection = [...passports];

它不会克隆项目。它创建了数组的副本，但引用了相同的对象。

为什么？因为对象是通过引用传递的。因此，两个数组中的每个数组中的每一项都将是对同一(基本(对象的引用。

要克隆对象，您需要展开每个对象：

const passportsCollection = passports.map(i => ({ ...i }));

看到它工作：

const personalDocs = [{
"IDcard": false,
"passport": true,
"documentnumber": "1",
"dateofissue": ""
},
{
"IDcard": true,
"passport": false,
"documentnumber": "2",
"dateofissue": ""
}
];

const passports = personalDocs.filter((doc) => doc.passport === true);
const passportsCollection = passports.map(i => ({ ...i }));
// tried:  const passportsCollection = passports.slice()
passportsCollection.forEach(object => {
delete object['IDcard'];
object.taken = "YES";
});
console.log("ALL PERSONAL DOCS:")
console.log(personalDocs) // this becomes same as passportsCollection :(
console.log("JUST PASSPORTS")
console.log(passportsCollection)

您遇到的另一个问题是在键入passportsCollection时错过了一个l。

---

另一方面，您正在做的事情可以简化为：

const passportsCollection = personalDocs
.filter(o => o.passport)
.map(({ IDcard, ...o }) => ({ ...o, taken: 'YES'}))

const personalDocs = [{
"IDcard": false,
"passport": true,
"documentnumber": "1",
"dateofissue": ""
},
{
"IDcard": true,
"passport": false,
"documentnumber": "2",
"dateofissue": ""
}
];
console.log({
personalDocs,
passportsCollection: personalDocs
.filter(o => o.passport)
.map(({ IDcard, ...o }) => ({ ...o, taken: 'YES'}))
})

Answer 2

它与JavaScript基础知识有关。

您复制了数组，但没有复制数组内部的对象。

const copy = passports.map(object => ({ ...object})

请注意，.map和.filter已经创建了数组的副本，因此不需要执行`[…passwords]

您也可以尝试使用structuredClone

Answer 3

您可以直接将map与filter一起使用，而不是使用forEach来创建新阵列。可以销毁对象以删除IDcard，而不是使用delete关键字

.map(({
IDcard,
...object
})

参见下面的片段

const personalDocs = [{
IDcard: false,
passport: true,
documentnumber: "1",
dateofissue: ""
},
{
IDcard: true,
passport: false,
documentnumber: "2",
dateofissue: ""
}
];
const passports = personalDocs.filter(doc => doc.passport).map(({
IDcard,
...object
}) => ({ ...object,
taken: 'YES'
}));
console.log("ALL PERSONAL DOCS:");
console.log(personalDocs);
console.log("JUST PASSPORTS");
console.log(passports);