Javascript React-深度复制阵列和对象问题

我有一个状态数组，我想对其执行操作，然后更新状态，但似乎我在某个地方丢失了一个深度副本，并且状态在没有setState的情况下得到更新，这给我带来了问题（我知道这一点，因为我看到即使没有setState行，状态也会得到更新）

const itemsToRemove=['Pepsi'，'Fanta']；
让temp=[…this.state.categories]；
让categoryToUpdate=temp.find（（category）=>category.name==“饮料”）；
categoryToUpdate.items=categoryToUpdate.items.filter（（项）=>{
return！itemsToRemove.includes（项目）；
});
//this.setState（{categories:temp}）

在这些行之后，我希望具有“饮料”名称的对象中的

categories

state仍然包括

itemsToRemove

中的项目，因为我没有更新状态，但它们仍然从状态中删除

类别

州的结构如下：

categories:[{name:String，items:Object}…]

您猜对了，当您直接更新

copy.items

时，您仍然会对

items

数组进行变异。虽然您使用了spread操作符，但它只深入一层。它仅创建阵列的浅拷贝

它在基本数据类型（字符串、数字等）上非常有效，但是当您有嵌套对象（数组）并复制它时，对象中的这些嵌套对象将不会被复制，因为它们只是引用

const-original=[{
名称：“名称1”，
项目：['1'，'2'，'3']
}, {
名称：“名称2”，
项目：['11'，'12'，'13']
}, 99]
常量副本=[…原件]
//请注意，原始的第三个元素不会更改为100
副本[2]=100
//而第二个元素中的所有项都将
复制[1]。项目=['21'，'22'，'23']
//如果更新对象中的字符串
//当它在一个对象内部时，它也会改变
复制[1]。名称='已更新名称2'
console.log（'已更新'，副本）
console.log（“原件”，原件）