无法对反应 table 数据进行排序

Question

在反应中 table 它显示的所有数据但是当我想单击 header 对其进行排序时抛出错误“超出最大更新深度。当组件在内部重复调用 setState 时可能会发生这种情况componentWillUpdate 或 componentDidUpdate。React 限制嵌套更新的数量以防止无限循环。”如何解决那个问题

import React, { useMemo } from "react";
import { useTable, useSortBy } from "react-table";
import pack from "./pack.json";
export default function App() {
  const COLUMN = [
    {
      Header: "ID",
      accessor: "id"
    },
    {
      Header: "Name",
      accessor: "name"
    },
    {
      Header: "Age",
      accessor: "age"
    }
  ];
  const columns = useMemo(() => {
    COLUMN, [];
  });
  const data = useMemo(() => {
    pack, [];
  });
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable(
    {
      columns: COLUMN,
      data: pack
    },
    useSortBy
  );

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

Answer 1

发生这种情况是因为您没有从 useMemo 返回 COLUMN 和 pack，因为它们被包裹在花括号中。

此外，您没有向 useTable 提供列和数据的记忆版本，而是传递了原始变量。

您也可以这样做：

import React, { useMemo } from "react";
import { useTable, useSortBy } from "react-table";
import pack from "./pack.json";

export default function App() {
  const columns = useMemo(
    () => [
      {
        Header: "ID",
        accessor: "id"
      },
      {
        Header: "Name",
        accessor: "name"
      },
      {
        Header: "Age",
        accessor: "age"
      }
    ],
    []
  );

  const data = useMemo(() => pack, []);

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable(
    {
      columns,
      data
    },
    useSortBy
  );

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

无法对反应 table 数据进行排序

Not able to sorting the react table data

reactjs

react-table