在React钩子中的嵌套Object中添加或删除数组中的元素

Question

在下面的例子中，我想从object3中添加或删除products数组元素，并且需要在react hooks状态下更新。我尝试过在setter中使用filter方法来删除元素，但它不起作用。有人能帮忙高效地处理吗。

const myValue = {
object1: {},
object2: {},
object3: {
products: [{
name: 'Fruits',
id: '1'
},
{
name: "Vegtables",
id: '2'
}],
number: 1
}
}

Answer 1

您可以提取object3作为另一个变量，执行您想做的任何操作，并将其与当前状态值组合再次设置state。

const {object3} = myValue;
// for example if you want to filter based on condition for id
const modifiedProducts = object3.products.filter((item) => item.id > '1');
setMyValue({
...myValue, 
object3: {
...object3, 
products: modifiedProducts
}
})

如果所有对象彼此独立，我还建议为每个对象创建多个状态。这里，如果某个组件只依赖于对象1，那么理想情况下，当对象3更新时，它不应该重新渲染。