React调用Covid19接口遍历Countries数组报map相关TypeError求助

这个TypeError: Cannot read properties of undefined (reading 'map')报错的核心原因是：你执行map遍历的时候，data.Countries处于undefined状态，和接口本身返回结构无关，属于异步请求时序或取值逻辑问题，可按以下步骤排查修复：

• 先处理异步请求时序问题
  调用api.Covid19属于异步操作，你写的遍历代码执行时，接口还没返回结果，如果你存储返回数据的变量初始值是空对象{}，此时取data.Countries必然是undefined。
  修复方案：加兜底判断避免空值报错：

  1. 用可选链加默认空数组兜底：(data?.Countries || []).map(/* 你的遍历逻辑 */)
  2. 加条件判断再执行遍历：只有确认Countries是数组时才执行遍历，比如React场景下可以写{Array.isArray(data.Countries) && data.Countries.map(/* 你的遍历逻辑 */)}

• 排查接口返回值的取值路径是否正确
  你确认接口返回包含Countries数组，但有可能你取数据的时候漏了外层嵌套层级，比如接口实际返回结构是{ code: 200, result: { Countries: [] } }，你直接拿res.data.Countries就会取到undefined。
  修复方案：在接口请求的成功回调里打印完整的返回结果，确认Countries字段的实际嵌套路径，调整你的取值代码即可。

• 排查context状态赋值逻辑
  如果你是把接口返回数据存在context中再跨组件取用，要确认两点：

  1. context的初始值有没有配置正确的Countries默认结构，不要留空导致初始读取就报错
  2. 接口请求成功后有没有正确调用context的更新方法赋值，避免状态没更新组件一直拿初始空值

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