React Table渲染Cell时original值为undefined问题排查

问题重现 #

使用最新版React Table渲染表格，已定义columns并传入CustomTable组件，但表格显示空值，调试发现Cell组件的original参数为undefined。

核心问题分析 #

你的CustomTable组件中未传递React Table所需的行和单元格Props，导致Cell无法获取原始数据上下文：

• <TableRow>未传入row.getRowProps()
• <TableCell>未传入cell.getCellProps()

React Table依赖这些Props传递内部状态（包括原始数据original），缺少配置会导致Cell组件无法拿到所需数据。

修复步骤 #

1. 补充行与单元格的Props传递 #

修改CustomTable组件中TableRow和TableCell的代码，添加对应的Props：

<TableBody {...getTableBodyProps()}>
  {rows.map((row) => {
    const rowId = row.id;
    prepareRow(row);
    return (
      // 传入行级Props
      <TableRow {...row.getRowProps()}>
        {row.cells.map((cell) => (
          <TableCell
            id={`cell-${cell.column.id}-${rowId}`}
            key={`cell-${cell.column.id}-${rowId}`}
            // 传入单元格级Props
            {...cell.getCellProps()}
          >
            {cell.render("Cell")}
          </TableCell>
        ))}
      </TableRow>
    );
  })}
</TableBody>

2. 可选：验证Accessor配置 #

你的columns中部分列使用accessor: (d) => d返回整个数据对象，这本身没问题，但建议保持配置一致性：

• 直接取字段的列（如configurationSetName），可保留accessor: CONSTANTS.configurationSetName
• 需要操作整个对象的列，accessor: (d) => d完全可行

3. 确认Data格式 #

确保传入CustomTable的data是非空的对象数组，每个元素包含configurationType、configurationSetName等预期字段。

修复原理 #

React Table的prepareRow方法会为行和单元格生成包含原始数据original、排序状态等信息的Props，只有通过row.getRowProps()和cell.getCellProps()传递这些Props，Cell组件才能正确获取original参数。

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