React 17.0.1 基于Object.entries实现对象数组动态表格渲染方法

原代码的核心问题 #

• 遍历逻辑完全错位：schedule本身是对象数组，使用Object.entries遍历会把数组索引（0、1...）作为键、数组内的单个对象作为值，完全无法拿到对象本身的键值对；且当前逻辑每遍历一个数组元素就生成一个独立<Table>，违背表格的基础结构规范，按这个逻辑渲染出来的每个独立Table只会显示一列，列头是数组索引（0、1），单元格内容是空值，会出现严重的列宽错位、表头重复问题。
• 取值语法无效：key[value]存在指代错位，既没有从当前行对象上取字段值，变量的对应关系完全不符合遍历逻辑，最终取值永远是undefined。

正确实现逻辑 #

动态表格仅需保留一个Table容器，拆分两层遍历即可完成渲染：

1. 提取统一表头：因为数组内所有对象的键结构一致，直接取数组首个元素的所有键，作为表格的列头，渲染在统一的<thead>中
2. 逐行渲染数据：遍历数组的每一个对象作为表格行，对每一行遍历所有列头，取出对应字段的值填充为表格单元格

可直接复用的代码 #

// 提前做判空，避免数组为空时取第一个元素的属性报错
const tableHeaders = schedule.length > 0 ? Object.keys(schedule[0]) : [];

return (
  <Table>
    <thead style={{ background: '#8b8498' }}>
      <tr>
        {/* 遍历渲染所有表头列 */}
        {tableHeaders.map(header => (
          <th key={header}>{header}</th>
        ))}
      </tr>
    </thead>
    <tbody>
      {/* 遍历每一行数据 */}
      {schedule.map((rowItem, rowIndex) => (
        // 给行加唯一key，优先用稳定的业务字段Sno，无则用索引兜底
        <tr key={rowItem.Sno ?? rowIndex}>
          {/* 按列头取当前行的字段值，渲染单元格 */}
          {tableHeaders.map(header => (
            <td key={`${rowIndex}-${header}`}>{rowItem[header]}</td>
          ))}
        </tr>
      ))}
    </tbody>
  </Table>
)

关键注意点 #

• 因为对象的键存在带空格的情况（比如"First Name"），不能使用点语法取值，必须通过方括号的动态键语法rowItem[header]获取对应值。
• React 17中列表渲染必须给每个元素绑定唯一的key属性，避免虚拟DOM的diff计算出现异常。
• 如果数组为空，可提前渲染“暂无数据”的提示，避免tableHeaders为空时表格结构异常。

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