React Table 在渲染 Cell 时渲染未定义的原始值

Question

我正在尝试使用反应表来渲染表格。我正在使用最新的反应表版本。 我已经像这样定义了我的列，并将其作为道具传递给其他组件，其中我有如下的表格渲染逻辑。

 columns = [{
  accessor: (d) => d,
  id: CONSTANTS.configurationType,
  Header: CONSTANTS.configurationTypeTitle,
  Cell: ({ original }) => (
    <div>
      {original?.configurationType}
    </div>
  ),
  sortMethod: (a, b, desc) =>
    sortSeatService(a, b, desc, CONSTANTS.configurationType),
},
{
  // accessor: (d) => d,
  accessor: CONSTANTS.configurationSetName,
  id: CONSTANTS.configurationSetName,
  Header: CONSTANTS.configurationSetNameTitle,
  headerClassName: "percentageWidth5 cellContent",
  className: "spark-text-left percentageWidth5 cellContent",
  Cell: ({ original }) => (
    <div>
      {original?.configurationSetName}
    </div>
  ),
},
{
  accessor: (d) => d,
  id: CONSTANTS.effectiveDate,
  Header: CONSTANTS.effectiveDateTitle,
  headerClassName: "spark-text-left percentageWidth6 cellContent",
  className: "percentageWidth6 cellContent",
  Cell: ({ original }) => getDateCell(original, CONSTANTS.effectiveDate),
  sortMethod: (a, b, desc) => sortDate(a, b, desc, CONSTANTS.effectiveDate),
},
{
  accessor: (d) => d,
  id: CONSTANTS.discontinueDate,
  Header: CONSTANTS.discontinueDateTitle,
  headerClassName: "spark-text-left percentageWidth7 cellContent",
  className: "percentageWidth7 cellContent",
  Cell: ({ original }) => getDateCell(original, CONSTANTS.discontinueDate),
  sortMethod: (a, b, desc) =>
    sortDate(a, b, desc, CONSTANTS.discontinueDate),
}]

和我的表格组件

const CustomTable = (props) => {

  const {data, columns} = props;
  
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
  useTable(
    {
      columns,
      data
    },
    useSortBy
  );
  return (
    <div>
      <section className="tableSection table-div">
        <Table
          {...getTableProps()}
        >
          <TableHead>
            {headerGroups.map((headerGroup) => (
              <TableRow
                key={headerGroup.id}
                {...headerGroup.getHeaderGroupProps()}
              >
                {headerGroup.headers.map((column) => (
                  <TableHeaderCell
                    key={column.id}
                    {...column.getHeaderProps(column.getSortByToggleProps())}
                  >
                    {column.render("Header")}
                  </TableHeaderCell>
                    ))}
              </TableRow>
              ))}
          </TableHead>
          <TableBody {...getTableBodyProps()}>
            {rows.map((row) => {
              const rowId = row.id;
              prepareRow(row);
              return (
                <TableRow>
                  {row.cells.map((cell) => (
                    <TableCell
                      id={`cell-${cell.column.id}-${rowId}`}
                      key={`cell-${cell.column.id}-${rowId}`}
                    >
                      {cell.render("Cell")}
                    </TableCell>
                    ))}
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </section>
    </div>
  );
};

CustomTable.propTypes = {
  props: PropTypes.objectOf(PropTypes.any),
  original: PropTypes.objectOf(PropTypes.any),
  data: PropTypes.arrayOf(PropTypes.object).isRequired,
  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
  onSortedChange:  PropTypes.objectOf(PropTypes.any).isRequired
}

CustomTable.defaultProps = {
  props: null,
  original: null,
};

export default CustomTable;

表格呈现空值。当我调试该问题时，我在 Cell 中得到原始内容为未定义。我在这里缺少什么？

Answer 1

从

row

获取单元格数据如下：

 columns = [{
  ...
  Cell: ({ row }) => (
    <div>
      {row?.original?.configurationSetName}
    </div>
  ),
  ...