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

Question

在下面的示例中，我想从 object3 添加或删除 products 数组元素，并且需要在反应挂钩 state 中更新。 我已经尝试在 setter 中使用过滤器方法来删除元素，但它不起作用。 任何人都可以帮助有效地做。

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

  

Answer 1

您可以将 object3 提取为另一个变量，执行您想做的任何操作并再次设置 state 并将其与当前 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
    }
})

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