React调用REST API渲染数据时出现reading 'map'报错如何解决

• 核心原因是posts变量在首次渲染时为undefined，无法调用数组方法map：你声明useState时没有传入初始值，所以posts的初始值是undefined。而useEffect里的接口请求是异步操作，会在组件第一次渲染完成后才执行，首次渲染走到posts.map逻辑时，接口还没返回数据，posts还是初始的undefined，就触发了该报错。
• 额外隐性问题：接口返回的单条数据主键是_id，你渲染时写的是post.id，后续就算接口返回成功，该字段也会显示为空。

1. 给useState设置初始值为空数组，保证初始状态下posts是数组类型：

const [posts, setCustomerData] = useState([]);

2. 渲染时增加可选链判断，作为兜底防护，避免接口返回异常导致Data不是数组时再次报错：

{posts?.map(post=>(
  // 原有表格逻辑保持不变即可
))}

3. 修正表格里的主键字段取值：
   把<td align="center">{post.id}</td>改成<td align="center">{post._id}</td>

如果需要优化用户体验，还可以额外增加加载状态：声明一个const [loading, setLoading] = useState(true)，请求发起时设为true，请求结束（无论成功失败）设为false，渲染时根据loading状态展示加载提示即可。

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