React JS中如何遍历指定JSON数据提取国家名称与对应数值

问题原因 #

你的代码存在两个嵌套结构访问错误，导致无法正常取到字段：

• 待遍历的数组存放在JSON根节点的fact字段下，不能直接遍历Data对象，需要访问Data.fact
• 国家名称COUNTRY是数组元素下dims对象的子属性，不能直接从数组元素e上取，需要通过e.dims.COUNTRY访问，对应的数值可以直接从e.Value获取

修正后的代码 #

// 提前将你拿到的JSON数据赋值给Data变量即可
function CountryDataRender() {
  // 可选链?.用于避免数据未加载完成时报错
  const listItems = Data?.fact?.map((item, idx) => (
    <div key={idx} className="country-item">
      <h2>{item.dims.COUNTRY}</h2>
      <p>统计年份：{item.dims.YEAR}</p>
      <p>HIV感染人数估算值：{item.Value}</p>
    </div>
  ))

  return <div className="map">{listItems}</div>
}

补充注意点 #

• React遍历列表元素需要给每个子项加唯一的key属性，这里如果数据没有唯一ID可以先用索引临时替代
• 如果数据是从后端接口请求获取的，建议额外加加载状态判断，避免空渲染

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