React useContext添加任务时ID被覆盖的问题修复求助

问题根源 #

你遇到的所有任务ID被最后一个覆盖的问题，核心原因是添加任务时复用了同一个对象引用，而非每次创建全新的任务对象。当你修改这个共享对象的ID时，列表中所有指向该对象的项都会同步变化，最终呈现出所有ID被最后一个覆盖的现象。

修复方案 #

在addTask函数中，每次添加任务都创建全新的任务对象实例，而不是复用同一个对象：

// AppProvider.tsx 中的 addTask 函数修改如下
const addTask = (title: string) => {
  // 每次创建新的任务对象，确保引用唯一
  const newTask = {
    id: Date.now(), // 用时间戳生成唯一ID，也可以用自增逻辑
    title: title
  };
  // 函数式更新确保基于最新状态修改
  setTaskList(prevTaskList => [...prevTaskList, newTask]);
};

如果需要用自增ID替代时间戳，也可以基于当前任务列表的最后一项ID来生成：

const addTask = (title: string) => {
  setTaskList(prevTaskList => {
    const newId = prevTaskList.length > 0 
      ? prevTaskList[prevTaskList.length - 1].id + 1 
      : 1;
    return [...prevTaskList, { id: newId, title }];
  });
};

额外检查 #

• 确认NewTask组件中调用addTask时，传递的title是当前输入的最新值，而非复用旧值
• 确保没有在其他地方修改已添加到列表中的任务对象引用

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