在React Hooks中对嵌套对象内的数组进行增删操作

前提说明 #

假设你的状态通过useState初始化：

import { useState } from 'react';

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

const [myState, setMyState] = useState(initialValue);

1. 删除products元素（基于id） #

核心是不可变更新：必须返回新的对象/数组，不能直接修改原状态。之前用filter失败大概率是因为没正确更新外层嵌套对象的引用。

const deleteProduct = (targetId) => {
  setMyState(prevState => ({
    // 拷贝外层对象
    ...prevState,
    object3: {
      // 拷贝object3的其他属性
      ...prevState.object3,
      // 用filter生成新数组，过滤掉目标id的元素
      products: prevState.object3.products.filter(item => item.id !== targetId)
    }
  }));
};

调用示例：deleteProduct('1') 会移除id为1的"Fruits"元素。

2. 添加products元素 #

同样遵循不可变原则，用扩展运算符生成新数组：

const addProduct = (newProduct) => {
  // 确保新元素有唯一id，避免重复
  if (!newProduct.id) {
    newProduct.id = Date.now().toString();
  }

  setMyState(prevState => ({
    ...prevState,
    object3: {
      ...prevState.object3,
      // 将新元素追加到数组末尾，生成新数组
      products: [...prevState.object3.products, newProduct]
    }
  }));
};

调用示例：addProduct({ name: 'Meat', id: '3' }) 会添加新元素到products数组。

关键注意事项 #

• 必须使用函数式更新（prevState参数）：确保拿到最新的状态值，避免闭包导致的状态过期问题
• 浅拷贝足够高效：这里嵌套层级不深，用扩展运算符...做浅拷贝即可，比深拷贝（如JSON.parse(JSON.stringify())）性能更好
• 所有修改都要生成新引用：React通过引用变化检测状态更新，直接修改原对象/数组不会触发组件重渲染

内容的提问来源于stack exchange，提问作者Meenatchi