为什么表没有显示任何传递给 usetable 的数据答案

【问题标题】：Why table is not showing any data that is passed into usetable为什么表没有显示任何传递给 usetable 的数据
【发布时间】：2021-09-22 21:18:32
【问题描述】：

Link to Codesandbox check Table

标题似乎正在显示，但最奇怪的是，当我在控制台记录数据道具时，它会显示所有正确的数据。但是，如果我 console.log 行没有任何单个对象可以看到数据道具。如何在此处显示所有表格内容？

import { FC } from "react";
import { useTable } from "react-table";

interface Column {
  Header: string;
  accessor: string;
}

interface TableProps {
  columns: Array<Column>;
  data: Array<any>;
}

export const Table: FC<TableProps> = ({ columns, data }) => {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable({
      data,
      columns,
    });
  console.log(columns, data);
  return (
    <>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row) => {
            console.log(row);
            prepareRow(row);

            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => (
                  <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </>
  );
};

【问题讨论】：

标签： reactjs typescript react-table

【解决方案1】：

首先，您需要检查您的数据，因为结构不正确：

/data/table.js

export const TableContent = [
    {
        "available on all exchanges": "Live trading terminal",
        "pioneer": true,
        "explorer": true,
        "adventurer": true,
        "hero": true
    },

应该是：

export const TableContent = [
    {
        "feature": "Live trading terminal",
        "pioneer": true,
        "explorer": true,
        "adventurer": true,
        "hero": true
    }

其次，您的列定义需要提供事实，即某些值是布尔值，如果您想显示为字符串，则需要进行转换。

/data/columns.tsx

export const TableHeaders = [
  {
    id: 'feature',
    Header: 'Features',
    accessor: 'feature'
  },
  {
    Header: 'Pioneer',
    id: 'pioneer',
    accessor: (d: any) => d.pioneer.toString()
  },
  {
    Header: 'Explorer',
    id: 'explorer',
    accessor: (d: any) => d.explorer.toString()
  },
  {
    Header: 'Adventurer',
    id: 'adventurer',
    accessor: (d: any) => d.adventurer.toString()
  },
  {
    Header: 'Hero',
    id: 'hero',
    accessor: (d: any) => d.hero.toString()
  }
];

这将导致：

Codesandbox Demo

【讨论】：