React Native渲染MongoDB数据报错：tasks.map不是函数

问题分析 #

你遇到的TypeError: tasks.map is not a function (it is undefined)错误，核心原因有两个：

• 异步请求逻辑错误：原代码里直接将client.get()返回的Promise赋值给response，并在then链外访问response.data——此时response是未完成的Promise，根本不存在data属性，这段代码会直接抛出错误，导致setTasks可能未正确执行，最终tasks变成undefined。
• 后端数据结构不匹配：即便你确认后端已获取MongoDB数据，但若返回的response.data不是数组（比如是包含数组的对象，如{ message: "xxx", tasks: [...] }），直接将其赋值给tasks会导致tasks非数组，无法调用map方法。

修复步骤 #

1. 修正异步请求处理逻辑 #

改用async/await让异步代码更清晰，避免Promise链外的错误访问：

useEffect(() => {
  const fetchTasks = async () => {
    try {
      const response = await client.get("/api/TasksRoute");
      console.log("后端返回数据:", response.data);
      // 根据后端实际返回结构调整，确保赋值给tasks的是数组
      setTasks(response.data.tasks || response.data);
      if (response.data.message === "Fetched tasks successfully") {
        console.log("任务获取成功");
      }
    } catch (err) {
      console.log("获取任务失败:", err);
    }
  };

  fetchTasks();
}, []);

如果偏好then链式写法，需保证所有依赖响应的逻辑都在链内：

useEffect(() => {
  client.get("/api/TasksRoute")
    .then((response) => {
      console.log("后端返回数据:", response.data);
      setTasks(response.data.tasks || response.data);
      if (response.data.message === "Fetched tasks successfully") {
        console.log("任务获取成功");
      }
    })
    .catch((err) => console.log("获取任务失败:", err));
}, []);

2. 强化渲染时的安全性 #

即使初始tasks是数组，也可以通过更严格的判断避免意外：

{Array.isArray(tasks) && tasks.map((task) => {
  // 你的任务项渲染逻辑
})}

3. 对齐后端返回数据结构 #

检查后端/api/TasksRoute接口的返回格式：

• 如果后端返回的是包含数组的对象（如{ message: "xxx", tasks: [/* 任务数组 */] }），需将setTasks的参数改为response.data.tasks，而非整个response.data。
• 如果后端直接返回任务数组，保持setTasks(response.data)即可。

额外注意点 #

• 原代码中useEffect开头的console.log(tasks)打印的是初始空数组，因为useState更新是异步的，不能用它判断是否获取到数据，应打印response.data。
• 原catch块中引用response.data会报错，因为错误发生时response可能不存在，直接打印err即可。

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