React遍历对象数组动态渲染含嵌套数组列表格的实现问题

• 遍历方法使用错误：JSX 中渲染列表必须使用map，该方法会返回组装好的 JSX 节点数组供 React 渲染；forEach仅执行循环逻辑、无返回值，编写的 JSX 内容不会被挂载到页面。
• 表格层级结构错乱：给定数据结构为「行对象 -> 行内单元格数组」，对应 DOM 结构应为一个Row包裹多个Cell；原有写法遍历每个单元格都生成独立Row，完全打乱了行列对应关系。
• 存在基础语法错误：组件声明关键字const误写为大写开头的Const，多处 JSX 标签未闭合，会直接触发编译报错。

以下实现完全满足全动态渲染需求，不需要按数组位置硬编码取值，自动识别数组类型字段渲染徽章：

const CustomTable = ({mockData}) => {
  return (
    <Table>
      <Header>
        <HeaderCell key="Name">Contact Name</HeaderCell>
        <HeaderCell key="ID">Contact ID</HeaderCell>
        <HeaderCell key="Group">Contact Group</HeaderCell>
      </Header>
      <Body>
        {/* 第一层遍历：每个顶层数据项对应表格一行 */}
        {mockData.map((rowItem) => (
          <Row key={rowItem.key}>
            {/* 第二层遍历：行内cells数组的每一项对应一个单元格 */}
            {rowItem.cells.map((cell) => {
              // 自动提取当前单元格的展示值，过滤key/id/headerName等非业务字段
              const cellEntries = Object.entries(cell).filter(([key]) => 
                !['key', 'id', 'headerName'].includes(key)
              );
              const displayValue = cellEntries[0]?.[1];

              return (
                <Cell key={cell.key}>
                  {/* 自动识别数组类型值，遍历渲染徽章，普通文本直接展示 */}
                  {Array.isArray(displayValue)
                    ? displayValue.map((badgeText, idx) => (
                        <span className="badge" key={idx}>{badgeText}</span>
                      ))
                    : displayValue
                  }
                </Cell>
              )
            })}
          </Row>
        ))}
      </Body>
    </Table>
  )
};

// 模拟数据可直接作为props传入组件使用
const mockData = [
  {
    "key":"row-0",
    "cells":[
      { key: 'cell-0', id: 'ID-0', headerName:'contactname', contactName: 'ABC' },
      { key: 'cell-1', id: 'ID-1', headerName: 'contactID', contactID:'123' },
      { key: 'cell-3', id: 'ID-3', headerName: 'contactGrp', contactGroup: ['A', 'B']}
    ]
  }
];

代码中自动识别字段的逻辑不需要绑定固定字段名，后续新增列、修改列字段名时只要保持「每个cell对象中非系统字段只有一个业务展示值」的规则，不需要修改组件渲染逻辑即可自动适配。徽章部分的<span className="badge">替换为项目中实际使用的Badge组件即可。

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