MERN栈待办应用编辑任务时触发TypeError: tasks.map is not a function

问题核心 #

你的taskReducer.js中，SET_EDIT_MODE和CLEAR_EDIT_MODE动作修改了状态结构——原本直接存储任务数组的状态被改成了包含editMode、taskToEdit的对象，导致后续EDIT_TASK动作执行时，tasks已经不是数组类型，调用map方法自然报错。

解决方案 #

1. 重构状态结构，分离任务数组与编辑状态

将初始状态改为包含独立任务数组的对象，避免覆盖数组类型：

// taskReducer.js 初始状态
const initialState = {
  tasks: [], // 始终保留任务数组
  editMode: false,
  taskToEdit: null
};

2. 修正reducer中各动作的状态处理逻辑

所有动作都基于上述对象结构更新，只修改对应属性，不破坏tasks数组：

• SET_EDIT_MODE：仅切换编辑模式并存储待编辑任务

case 'SET_EDIT_MODE':
  return {
    ...state,
    editMode: true,
    taskToEdit: action.payload
  };

• CLEAR_EDIT_MODE：仅关闭编辑模式并清空待编辑任务

case 'CLEAR_EDIT_MODE':
  return {
    ...state,
    editMode: false,
    taskToEdit: null
  };

• EDIT_TASK：对state.tasks数组执行map操作，更新目标任务

case 'EDIT_TASK':
  return {
    ...state,
    tasks: state.tasks.map(task => 
      task._id === action.payload._id ? action.payload : task
    )
  };

3. 调整组件中获取任务数据的方式

在组件中从状态对象里解构出tasks数组，确保后续调用map时数据类型正确：

// 例如在AllTask.jsx或其他组件中
const { tasks, editMode, taskToEdit } = useSelector(state => state.tasks);

4. 验证SaveTask.jsx的动作触发逻辑

确保提交编辑时，EDIT_TASK动作的payload是后端返回的单个更新后任务对象，保证数组更新逻辑能正确匹配任务ID。

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