React Hook Form字段数组渲染问题：如何展示表单提交数据？

首先得说清楚，你报错的根源在于state.data.ethics并不是一个数组，而是一个混合了数字索引键和额外属性（value、label）的对象，而且对象本身也没有each这个属性，所以你写的ethics.each.map自然会抛出“Cannot read property 'map' of undefined”的错误。

根据你给出的JSON结构，我分几种情况给你对应的解决方案：

情况1：只想渲染顶级的label内容 #

如果你的需求是展示最外层的label（也就是"Informed consent"），直接取值渲染就行，不需要循环：

<Tag color="magenta">{state.data.ethics.label}</Tag>

情况2：需要渲染数字索引对应的子项内容 #

如果要展示那些0、1键对应的子对象里的explain或managementPlan，得先把这些子对象从原对象中提取出来变成数组，再用map渲染。可以用Object.entries()搭配过滤来实现：

// 先提取出数字键对应的子项
const ethicsSubItems = Object.entries(state.data.ethics)
  // 过滤出键是数字的属性
  .filter(([key]) => !isNaN(Number(key)))
  // 只保留属性值部分
  .map(([_, item]) => item);

// 然后渲染子项内容
{ethicsSubItems.map((item, index) => (
  <div key={index}>
    <Tag color="magenta">说明：{item.explain}</Tag>
    {item.managementPlan && <Tag color="cyan">管理计划：{item.managementPlan}</Tag>}
  </div>
))}

情况3：同时渲染顶级label和所有子项 #

如果要把两者结合起来展示，代码可以这么写：

<div>
  <h3><Tag color="magenta">{state.data.ethics.label}</Tag></h3>
  <div className="sub-items">
    {Object.entries(state.data.ethics)
      .filter(([key]) => !isNaN(Number(key)))
      .map(([key, item]) => (
        <div key={key} className="item">
          <p>子项 {Number(key)+1}：</p>
          <p>说明：{item.explain}</p>
          <p>管理计划：{item.managementPlan || '未填写'}</p>
        </div>
      ))}
  </div>
</div>

简单总结下：因为你的ethics是对象不是数组，所以不能直接用数组的map方法，得先把需要的部分转换成数组再处理，同时注意不要把value和label这些非子项的内容也混入数组里。

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