React项目报错：Tasks.map不是函数，无法渲染任务列表

DevOps 小满

2026-8-7

解决React中Tasks.map不是函数的问题

1. 确保初始状态为数组

如果组件state中Tasks的初始值是null/undefined而非空数组，第一次渲染时调用map必然报错。

// 正确的初始状态设置
const [tasks, setTasks] = useState([]); // 初始化为空数组，而非null或undefined

2. 检查接口返回的数据结构

后端接口可能返回嵌套对象（比如{ code: 200, data: [任务列表] }）而非直接数组，直接将整个响应赋值给tasks会导致它变成对象，无法调用map。

axios请求处理示例：

axios.get('http://localhost:5000/task')
  .then(res => {
    console.log('接口返回完整数据:', res.data); // 先打印确认结构
    // 取到真正的任务数组，兼容直接返回数组的情况
    setTasks(res.data.data || res.data);
  })
  .catch(err => {
    console.error('请求失败:', err);
    setTasks([]); // 失败时设为空数组，避免渲染报错
  });

fetch请求处理示例：

fetch('http://localhost:5000/task')
  .then(res => res.json())
  .then(data => {
    console.log('接口返回完整数据:', data); // 确认数据结构
    setTasks(data.data || data);
  })
  .catch(err => {
    console.error('请求失败:', err);
    setTasks([]);
  });

3. 渲染时添加安全判断

即使初始状态是数组，请求异常或接口返回非数组时，添加判断可以避免报错：

// 方式1：先确认是数组再渲染
{Array.isArray(tasks) && tasks.map(task => (
  <Todo key={task.id} task={task} />
))}

// 方式2：使用可选链操作符（ES2020+）
{tasks?.map(task => (
  <Todo key={task.id} task={task} />
))}