в таблице реагирования отображаются все данные, но когда я хочу щелкнуть заголовок для сортировки, выдает ошибки «Максимальная глубина обновления превышена. Это может произойти, когда компонент неоднократно вызывает 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>
;
</>
);
}
Это происходит потому, что вы не возвращаете 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>
;
</>
);
}