添加基本的排序和过滤功能时，我的反应表组件不呈现

Question

我有一个基本的反应表组件，它可以在没有排序和过滤的情况下工作，但是当我添加这两个功能时，它会出错：

> publicUtils.js:205 Uncaught Error: Renderer Error ☝️
>     at Object.render (publicUtils.js:205)
>     at reactTable.js:31
>     at Array.map (<anonymous>)
>     at ReactTable (reactTable.js:29)
>     at renderWithHooks (react-dom.development.js:16305)
>     at updateFunctionComponent (react-dom.development.js:19588)
>     at beginWork (react-dom.development.js:21601)
>     at HTMLUnknownElement.callCallback (react-dom.development.js:4164)
>     at Object.invokeGuardedCallbackDev (react-dom.development.js:4213)
>     at invokeGuardedCallback (react-dom.development.js:4277)

工作代码如下：

import React from "react";
import { useTable, useSortBy, useFilters } from "react-table";

function ReactTable({ columns, data }) {
  const tableInstance = useTable({ columns, data }, useFilters, useSortBy);

  return (
    <table {...tableInstance.getTableProps()}>
    <thead>
      {tableInstance.headerGroups.map((headerGroup) => (
        <tr {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map((column) => (
            <th {...column.getHeaderProps()}>{column.render("Header")}</th>
          ))}
        </tr>
      ))}
    </thead>
    <tbody {...tableInstance.getTableBodyProps()}>
      {tableInstance.rows.map((row) => {
        tableInstance.prepareRow(row);
        return (
          <tr {...row.getRowProps()}>
            {row.cells.map((cell) => (
              <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
            ))}
          </tr>
        );
      })}
    </tbody>
  </table>
  );
}

export default ReactTable;

如果我用以下代码替换它，它将停止工作：

import React from "react";
import { useTable, useSortBy, useFilters } from "react-table";

function ReactTable({ columns, data }) {
  const tableInstance = useTable({ columns, data }, useFilters, useSortBy);

  return (
    
      <table {...tableInstance.getTableProps()}>
        <thead>
          {tableInstance.headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th
                  {...column.getHeaderProps(column.getSortByToggleProps())}
                >
                  {column.render("Header")}
                  <span>
                    {column.isSorted
                      ? column.isSortedDesc
                        ? " 🔽"
                        : " 🔼"
                      : ""}
                  </span>
                </th>
              ))}
            </tr>
          ))}
          <tr>
            {tableInstance.columns.map((column) => (
              <th key={column.accessor}>
                {column.canFilter ? column.render("Filter") : null}
              </th>
            ))}
          </tr>
        </thead>
        <tbody {...tableInstance.getTableBodyProps()}>
          {tableInstance.rows.map((row) => {
            tableInstance.prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => (
                  <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
  );
}

export default ReactTable;

我做错了什么？列和数据完全相同。我什至将失败的代码放在 chatGPT 中，它告诉我没问题。知道我做错了什么吗？谢谢。