React中map空状态异常，提交后报map is not a function如何解决？

错误根因 #

你遇到的TypeError: _todos$tasks.map is not a function错误核心原因有3个：

• 新增任务时reducer逻辑错误：后端createTask接口大概率返回的是单个新增的任务对象，而你在CREATE类型的 reducer 分支中直接将整个tasks字段赋值为这个单个对象，导致tasks从数组变成了对象，自然没有map方法。
• 异步请求顺序混乱：handleSubmit中你连续调用了两个异步action，createTask和getTasks没有做顺序控制，可能出现getTasks先返回更新了数组，随后createTask的返回再把tasks覆盖为单个对象的时序问题。
• 可选链防护逻辑不完整：可选链只能规避tasks为null/undefined的情况，当tasks为对象、字符串等非数组类型时，可选链不会阻断map调用，所以依然会报错。

修复步骤 #

1. 修正reducer的CREATE分支逻辑 #

如果你希望新增任务后直接在前端拼接新任务，不需要重复拉取全量列表，修改reducer代码：

case CREATE:
  return {
    ...state,
    // 把新任务拼接到原有数组末尾，而不是直接覆盖整个tasks
    tasks: state.tasks ? [...state.tasks, action.payload] : [action.payload],
    errors: null
  }

如果你希望新增后拉取全量列表保证数据和后端一致，可以直接去掉CREATE分支对tasks的赋值，避免覆盖全量查询的结果。

2. 调整提交逻辑的异步顺序 #

修改handleSubmit为异步函数，等任务创建完成后再拉取最新列表，避免时序问题：

const handleSubmit = async (e) => {
  e.preventDefault();
  console.log(formData);
  // 等待创建任务的请求完成
  await dispatch(createTask(formData));
  dispatch(getTasks())
};

3. 新增数组类型校验（可选，提升代码健壮性） #

渲染列表前新增数组类型判断，避免极端情况报错：

{todos==null? 
  <Typography>Loading...</Typography>
  :
  <>
    {Array.isArray(todos?.tasks) ? 
      todos.tasks.map((todo) => (
        <Task id={todo.task} todo={todo} />
      ))
      :
      <Typography>暂无任务</Typography>
    }
  </>
}

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