React调用API展示数据时出现.map不是函数错误求助

你遇到的错误本质是：listOfPosts在渲染时不是数组——虽然初始状态设了空数组，但API返回的res.data可能是对象、null或其他非数组类型，更新状态后就无法调用map方法。

具体解决步骤： #

1. 先确认API返回的真实结构
   在axios的回调里打印返回数据，明确后端给的格式：

axios.get("http://localhost:5000/api/regist").then((res) => {
  console.log(res.data); // 打开控制台看实际返回内容
  setListOfPosts(res.data);
});

比如很多后端会返回包裹数组的对象（如{ code: 200, data: [...] }），这时候你需要取res.data.data而非直接用res.data。

2. 渲染时做类型校验
   在调用map前，先判断当前状态是否为数组，避免报错：

<div className="App">
  {Array.isArray(listOfPosts) ? listOfPosts.map((value, key) => (
    <div className="post" key={key}>
      <div className="title"> {value.email_U} </div>
      <div className="body">{value.nome_U}</div>
      <div className="footer">{value.pass}</div>
    </div>
  )) : <div>暂无数据</div>}
</div>

3. 请求时做兜底处理
   不管API返回什么，确保最终存入状态的是数组，同时处理请求失败的情况：

useEffect(() => {
  axios.get("http://localhost:5000/api/regist")
    .then((res) => {
      // 把非数组数据转为数组，或者取正确的数组字段
      const validData = Array.isArray(res.data) ? res.data : [];
      setListOfPosts(validData);
    })
    .catch(err => {
      console.error("数据请求失败:", err);
      setListOfPosts([]); // 失败时也设为空数组，避免渲染报错
    });
}, []);

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