如何动态提取对象数组各键的嵌套value值并渲染到表格中

你当前的渲染逻辑有两处明显的逻辑偏差：

• 把整行数据的所有字段值都塞进了单个Table.Cell，根本不符合多列表格的渲染结构
• Object.values(item)拿到的是一组嵌套对象（每个元素都是{value: 具体内容}的结构），不是能直接渲染的原始值，直接渲染的话React会把对象转成[object Object]，自然看不到真实内容

由于你的数据结构是统一的数组对象，每个字段都是固定的「键名: {value: 对应值}」嵌套格式，只需要按两步调整就能实现动态渲染：

1. 从数据中提取统一的字段键名作为列标识，保证每一行的取值顺序对齐，不会出现内容错位
2. 逐行遍历字段时，从嵌套结构里取出value对应的实际值，为每个值生成独立的Table.Cell

// 提取数据的所有字段作为统一表格列（所有行结构一致的前提下，取第一条的键名即可）
const tableColumns = Object.keys(data[0] || {});

<Table>
  {/* 动态生成表头 */}
  <Table.Header>
    <Table.Row>
      {tableColumns.map(colKey => (
        <Table.HeaderCell key={colKey}>{colKey}</Table.HeaderCell>
      ))}
    </Table.Row>
  </Table.Header>
  {/* 动态渲染表体内容 */}
  <Table.Body>
    {data.map((rowItem, rowIndex) => (
      <Table.Row key={rowIndex}>
        {tableColumns.map(colKey => {
          // 取嵌套结构里的真实值，加可选链兜底避免空值报错
          const realValue = rowItem[colKey]?.value ?? '';
          return <Table.Cell key={colKey}>{realValue}</Table.Cell>
        })}
      </Table.Row>
    ))}
  </Table.Body>
</Table>

• 直接用Object.values(item).map(item => item.value)也能拿到真实值，但如果不同数据行的字段插入顺序有差异，会出现列内容对错位的问题，优先推荐按统一列键名遍历的方案，稳定性更高
• 针对空值、空字符串的场景，可以在给realValue赋值的时候加自定义兜底逻辑，比如空值显示占位符--

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