如何在React中使用嵌套map函数？解决嵌套JSON数据渲染问题

问题描述 #

我有一段嵌套结构的JSON数据，需要在React中获取数据并渲染到UI界面，但因数据嵌套的问题无法实现。

JSON数据 #

const data = [
  {
    "First Row": {
      "info": 274.176,
    }
  },
  {
    "Second Row": {
      "info": 139.536,
    }
  }
]

当前错误代码 #

{data
  ? data.map((val, i) =>
      val[i].map((val2) => {
        <>
          <div>{val2.info}</div>
        </>;
      })
    )
  : ""}

错误原因 #

1. 数组中的每个val是单个对象（如{"First Row": {...}}），并非数组，不能调用map方法
2. val[i]的写法逻辑错误：i是数组元素的索引，和对象内部的自定义键名（"First Row"、"Second Row"）无关，无法通过索引获取对象的键值对

正确实现方式 #

方式一：仅渲染info数值 #

{data ? data.map((item) => {
  // 提取对象中的唯一值（每个数组元素仅含一个键值对）
  const rowData = Object.values(item)[0];
  // 用info值作为唯一key，确保React元素的唯一性
  return <div key={rowData.info}>{rowData.info}</div>;
}) : ""}

方式二：同时渲染行名称和info数值 #

{data ? data.map((item, index) => {
  // 将对象转为键值对数组，遍历每个键值对
  return Object.entries(item).map(([rowName, rowData]) => (
    // 用行名称+索引作为唯一key
    <div key={`${rowName}-${index}`}>
      <span>{rowName}: </span>
      <span>{rowData.info}</span>
    </div>
  ));
}) : ""}

说明 #

• Object.values(item)：将对象的所有值提取为数组，这里每个数组元素仅含一个值，直接取索引0即可获取包含info的对象
• Object.entries(item)：将对象转为[键名, 值]格式的数组，方便同时获取行名称和对应数据
• 必须为每个React列表元素添加唯一的key属性，避免React渲染警告

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