Невозможно отсортировать данные таблицы реакции

в таблице реагирования отображаются все данные, но когда я хочу щелкнуть заголовок для сортировки, выдает ошибки «Максимальная глубина обновления превышена. Это может произойти, когда компонент неоднократно вызывает 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>
      ;
    </>
  );
}
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
0
21
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это происходит потому, что вы не возвращаете COLUMN и pack из useMemo, так как они заключены в фигурные скобки.

Кроме того, вместо предоставления мемоизированной версии столбцов и данных для 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>
      ;
    </>
  );
}

Другие вопросы по теме

Использование данных API для создания таблицы React в React.js
Как мне условно изменить значение доступа к таблице реагирования на основе данных?
Как исправить «Ошибка: требуется идентификатор столбца (или строковый метод доступа)!» в Nextjs.........[таблица реакций]
Отображать полосу загрузки во время получения данных
Удалить определенную ячейку в главном столбце
Показать новый столбец в таблице
Локальное состояние дочернего компонента изменяется, когда изменения происходят внутри родительского компонента: ReactJS
Запретить сброс дочернего состояния после изменения состояния родительского компонента, а также получить значения всех дочерних компонентов: ReactJS+ Typescript
Нужно получить все значения всех экземпляров дочерних компонентов и использовать их в родительском методе: ReactJS
Как перейти на другую страницу, нажав на строку таблицы из реагирующей таблицы?