如何在React组件中渲染JSON数据并将各数组转为独立无序列表

你的需求是把JSON里的每个数组（h3、h4、h5对应的数组）分别渲染成独立的无序列表，当前代码存在几个问题导致无法正常渲染：

• 外层map没有返回结果，组件无输出
• 未给每个数组包裹<ul>标签
• 列表项缺少唯一key属性，会触发React警告

修正后的代码 #

import { Disclosure } from '@headlessui/react'

const DisclosureHelper = ({ data }) => {
  // 遍历数据对象的键值对，同时获取分组标识（h3/h4/h5）和对应数组
  return (
    <div>
      {Object.entries(data).map(([groupKey, itemList]) => (
        <ul key={groupKey}>
          {itemList.map((item, idx) => (
            <li key={`${groupKey}-${idx}`}>{item}</li>
          ))}
        </ul>
      ))}
    </div>
  )
}

export default DisclosureHelper

关键说明 #

1. 使用Object.entries遍历：比起只拿值的Object.values，Object.entries能同时获取每个数组的分组标识（h3、h4、h5），既可以用作<ul>的唯一key，也方便后续如果需要显示分组标题时使用。
2. 确保返回JSX：直接在组件的return中输出渲染结果，避免之前内层map有返回但外层无返回的问题。
3. 添加唯一key：给每个<ul>和<li>设置唯一key，这是React列表渲染的要求，能避免性能问题和警告。
4. 根元素包裹：用<div>作为根元素包裹所有列表，符合React组件只能返回单个根节点的规则（也可以用<>替代）。

注意 #

如果传入组件的data是包含value键的完整对象（即你提供的原始JSON结构），需要先解构出value：

// 当data是{value: {...}}时
return (
  <div>
    {Object.entries(data.value).map(([groupKey, itemList]) => (
      <ul key={groupKey}>
        {itemList.map((item, idx) => (
          <li key={`${groupKey}-${idx}`}>{item}</li>
        ))}
      </ul>
    ))}
  </div>
)

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