如何使用useState修改数组中指定todoId对象的todo元素？

由于React状态遵循不可变更新原则，不能直接修改原状态数组中的对象，需要通过创建新数组和新对象完成更新。核心思路是：遍历原todoList，找到todoId匹配的对象，更新其todo属性，其余对象保持不变。

以下是几种常见场景的实现代码：

1. 给指定todoId的列表添加新todo项 #

比如给todoId:1（Work分类）添加新的待办项：

// 定义添加函数
const addTodoToTarget = () => {
  const newTodo = { id: 101, text: "完成项目文档" }; // 新的待办项
  setTodoList(prevTodoList => 
    prevTodoList.map(item => {
      // 匹配到目标todoId时，创建新对象并更新todo数组
      if (item.todoId === 1) {
        return { ...item, todo: [...item.todo, newTodo] };
      }
      // 未匹配的对象直接返回原引用
      return item;
    })
  );
};

2. 替换指定todoId的整个todo数组 #

直接替换todoId:1的待办列表：

const replaceTargetTodos = () => {
  const newTodoArray = [
    { id: 102, text: "开团队同步会议" },
    { id: 103, text: "提交本周工作周报" }
  ];
  setTodoList(prevTodoList => 
    prevTodoList.map(item => 
      item.todoId === 1 ? { ...item, todo: newTodoArray } : item
    )
  );
};

3. 删除指定todoId列表中的某条待办项 #

比如删除todoId:1列表中id为101的待办：

const deleteTodoFromTarget = (todoItemId) => {
  setTodoList(prevTodoList => 
    prevTodoList.map(item => {
      if (item.todoId === 1) {
        // 过滤掉要删除的项，生成新的todo数组
        return { ...item, todo: item.todo.filter(todo => todo.id !== todoItemId) };
      }
      return item;
    })
  );
};

// 调用示例：删除id为101的待办项
deleteTodoFromTarget(101);

关键注意事项 #

• 始终通过setTodoList的回调函数获取当前最新状态（prevTodoList），避免状态更新的异步问题
• 使用对象展开运算符{...item}和数组展开运算符[...item.todo]创建新对象/数组，确保不修改原状态引用
• 仅更新目标对象，其余对象保持原引用，有助于React的性能优化

内容的提问来源于stack exchange，提问作者Anonymous _-