React中使用map方法遍历数组报错：Uncaught (in promise) TypeError: posts.map is not a function

这个报错其实很典型，核心原因就是你尝试调用map方法的posts并不是一个数组——虽然你一开始给useState设置了空数组默认值，但API返回的数据格式大概率和你预期的不一样，导致setPosts之后posts变成了非数组类型（比如对象、null或者undefined）。

我帮你一步步排查和解决：

1. 先确认API返回的实际数据格式 #

你代码里已经加了console.log(posts)，打开浏览器控制台看看这个输出到底是什么：

• 如果输出是一个对象（比如{ data: [...] }或者{ posts: [...] }），那说明你需要从对象里提取真正的数组部分再传给setPosts。比如假设API返回的是{ data: [...postsList] }，那要改成：

  const response = await fetch('http://localhost:5000/api/post/');
  const result = await response.json();
  // 这里根据实际返回的属性名调整，比如result.data或者result.posts
  setPosts(result.data);
  

• 如果输出是null或者undefined，那说明API请求可能出错了，或者后端返回了异常数据，这时候可以用console.log(response.status)检查接口状态码是否正常（比如是不是200）。

2. 给setPosts加一层安全校验 #

不管API返回什么，我们都可以确保最终传给setPosts的是数组，避免后续渲染报错：

const getPosts = async () => {
  try {
    const response = await fetch('http://localhost:5000/api/post/');
    const posts = await response.json();
    // 确保posts是数组，不是的话就设为空数组
    setPosts(Array.isArray(posts) ? posts : []);
    console.log(posts);
  } catch (err) {
    // 捕获请求失败的情况，避免页面崩溃
    console.error('获取帖子失败:', err);
    setPosts([]);
  }
}

3. 渲染时再加一层安全判断 #

在调用map之前先确认posts是数组，双重保险：

<div className="post-container">
  {Array.isArray(posts) && posts.map((post) => {
    const { id, title, content, author } = post;
    return (
      // 你的post组件代码...
    );
  })}
</div>

至于旧项目能正常运行的原因，大概率是旧项目的API返回直接就是数组格式，而现在的接口返回结构变了，或者你漏了提取数组的步骤。先看控制台的console.log输出，这是最快定位问题的方法~

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