调用特定Dispatcher时Tasks数组消失（MERN栈）

问题场景 #

• 开发MERN栈CRUD待办应用，页面左侧为任务列表、右侧是添加/编辑任务表单
• 编辑功能逻辑正常：点击任务旁的Edit按钮，表单可加载对应任务的标题和描述，修改后能正常保存到数据库
• 异常表现：点击Edit按钮后，任务列表直接消失并显示“No Tasks Found”，仅刷新页面才能恢复；添加新任务时无此问题
• 排查结果：通过console.log确认任务数据实际存在，仅UI未渲染，无控制台报错；定位到调用SET_EDIT_MODE和CLEAR_EDIT_MODE两个Dispatcher后，Tasks数组在UI中消失

解决方案 #

修改AllTask.jsx中的渲染逻辑，改用基于对象的方式管理任务数据，避免数组引用变化导致的UI渲染异常。

代码片段 #

原问题代码示例 #

// 原渲染逻辑依赖数组直接判断，易受引用变化影响
const AllTasks = ({ tasks }) => {
  return (
    <div className="tasks-container">
      {tasks.length === 0 ? (
        <p>No Tasks Found</p>
      ) : (
        tasks.map(task => (
          <TaskItem key={task._id} task={task} />
        ))
      )}
    </div>
  );
};

修改后的修复代码 #

// 转换为对象键值对形式处理任务数据
const AllTasks = ({ tasks }) => {
  // 将任务数组转为对象，通过ID作为键存储
  const tasksObj = tasks.reduce((acc, task) => {
    acc[task._id] = task;
    return acc;
  }, {});

  const taskEntries = Object.entries(tasksObj);

  return (
    <div className="tasks-container">
      {taskEntries.length === 0 ? (
        <p>No Tasks Found</p>
      ) : (
        taskEntries.map(([id, task]) => (
          <TaskItem key={id} task={task} />
        ))
      )}
    </div>
  );
};

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