React单帖页面报错Cannot read property 'map' of undefined如何解决

• 请求路径错误：前端fetch写死了/post/:id，没有将路由占位符:id替换为URL里的真实帖子ID，导致请求接口错误，返回的数据不符合预期。
• 前后端返回结构不匹配：后端接口直接返回单条帖子对象res.json(post)，但前端错误取值data.post，data.post本身就是undefined，将undefined赋值给原本初始为数组的data状态后，调用map方法自然报错。
• 数据类型不匹配：后端返回的是单个对象，不是数组，就算取值正确，直接对对象调用map方法也会报错，map仅支持数组类型调用。
• useEffect依赖缺失：当前useEffect没有加依赖数组，组件每次渲染都会重复发起请求，属于潜在隐患。

1. 首先导入React Router的useParams钩子获取真实帖子ID：

import { useParams } from 'react-router-dom'
// 组件内部添加
const { id } = useParams()

2. 修改fetch请求地址，拼接真实ID：

const res = await fetch(`/post/${id}`, {
  // 其余请求配置不变
})

3. 修正状态赋值逻辑，将单条对象包裹为数组，适配原有map逻辑：

// 原代码setdata(data.post)改为
setdata([data])

如果不需要复用列表逻辑，更推荐直接删除map，直接渲染单条数据：

<div className = "confession">
  <div className="post">
    <h3>{data.heading}</h3>
  </div>
  <div className="body-2">
    <p>{data.confess}</p>
  </div>
  <FcLikePlaceholder  size="2em"/>
  <FcComments style={{position:'relative',left:'20px'}}size="2em"/>
</div>

4. 给useEffect添加依赖数组，避免重复请求：

useEffect(()=>{
  callSinglePage();
}, [id]);

5. 可选优化：渲染前添加非空判断，避免加载阶段报错：

// 原map逻辑改为
data?.map(post=>{
  // 其余渲染逻辑不变
})

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