React 表不渲染

Question

我可以通过控制台日志访问这些值，但它实际上并没有渲染任何内容或显示错误

    const columns = [
        {
          id: 1, // Assign a unique ID for this column
          Header: 'ID',
          accessor: 'id', // This should match the key in your JSON data
        },
        {
          id: 2, // Assign a unique ID for this column
          Header: 'First Name',
          accessor: 'first_name', // This should match the key in your JSON data
        },
        {
          id: 3, // Assign a unique ID for this column
          Header: 'Last Name',
          accessor: 'last_name', // This should match the key in your JSON data
        },
        {
          id: 4, // Assign a unique ID for this column
          Header: 'Email',
          accessor: 'email', // This should match the key in your JSON data
        },
        {
          id: 5, // Assign a unique ID for this column
          Header: 'Gender',
          accessor: 'gender', // This should match the key in your JSON data
        },
        {
          id: 6, // Assign a unique ID for this column
          Header: 'Date of Birth',
          accessor: 'dob', // This should match the key in your JSON data
        },
      ];
      
      
    const table = useReactTable({
        data,
        columns,
        getCoreRowModel: getCoreRowModel(),
    })

这里没什么好看的

                    <table>
                        <thead>
                            {table.getHeaderGroups().map(headerGroup=>(
                                <tr key={headerGroup.id}>
                                    {headerGroup.headers.map(header =>(
                                        <th key={header.id}>
                                            {flexRender(
                                                header.column.columnDef.header,
                                                header.getContext())}
                                        </th>
                                    ) )}
                                </tr>
                            ))}
                        </thead>
                        <tbody>
                        {table.getRowModel().rows.map(row => (
                            <tr key={row.id}>
                            {row.getVisibleCells().map(cell => (
                                <td key={cell.id}>
                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                </td>
                            ))}
                            </tr>
                        ))}
                        </tbody>

                    </table>

这是表格部分。

在我使用从 api 获得的另一个模拟数据并且我只能渲染列之前，然后我更改为这个，甚至不能渲染列。没有错误。

我什至能够访问数据

关于如何解决这个问题有什么想法吗？

我尝试记录从表到 table.getHeaderGroup()[0] 的每个步骤直到columnDef，并且我能够获取日期，对于行也是如此。但数据没有在屏幕上呈现

好吧，我看到由于拼写错误，列没有渲染，但单元格仍然没有渲染

Answer 1

将

accessor

替换为

accessorKey

即可正常工作。

另外，还有一个错别字。将

Header

替换为

header

以实际显示标题。

const columns = [
  {
    id: 1, // Assign a unique ID for this column
    header: 'ID',
    accessorKey: 'id', // This should match the key in your JSON data
  },
  {
    id: 2, // Assign a unique ID for this column
    header: 'First Name',
    accessorKey: 'first_name', // This should match the key in your JSON data
  },
  {
    id: 3, // Assign a unique ID for this column
    header: 'Last Name',
    accessorKey: 'last_name', // This should match the key in your JSON data
  },
  {
    id: 4, // Assign a unique ID for this column
    header: 'Email',
    accessorKey: 'email', // This should match the key in your JSON data
  },
  {
    id: 5, // Assign a unique ID for this column
    header: 'Gender',
    accessorKey: 'gender', // This should match the key in your JSON data
  },
  {
    id: 6, // Assign a unique ID for this column
    header: 'Date of Birth',
    accessorKey: 'dob', // This should match the key in your JSON data
  },
];