Блог

Пример кода: https://codesandbox.io/s/nice-cherry-z8hn9

Я использую react-таблицу для создания компонента таблицы, который получает объект конфигурации с настройками конфигурация столбцов.

Я создал 2 компонента, a TableInstance и a Table

TableInstance Компонент обрабатывает данные и состояние таблицы, а таблица обрабатывает только рендеринг пользовательского интерфейса.

Я также создал 2 пользовательских крючка, которые обрабатывают состояние и данные в TableInstance компоненте.

Крючок 1, называемый useTableState , имеет простой редуктор, который устанавливает pageSize и текущий page

Крючок 2, называемый useTableData , делает запрос и возвращает данные, плюс он также возвращает конфигурацию столбцов, которая react-table необходима.

Следуя примерам в react-table документах, я создал 2 useEffect крючка ( TableInstance.js строки 33 и 38), которые реагируют, когда состояние таблицы изменяется при разбиении на страницы, когда это происходит, я отправляю действие в useTableState редуктор, которое обновляет состояние, чтобы установить pageSize и page .

Проблема возникает, когда я устанавливаю manualPagination: false . Я получаю Maximum update depth exceeded , потому TableInstance что постоянно перерисовываю. Я не знаю, что вызывает повторную визуализацию. Если вместо использования useReducer Я использую useState , тогда ошибки не происходит. Вы можете проверить это сами, в крючке useTableState я оставил useState комментарий к подходу, если вы просто прокомментируете диспетчеров и раскомментируете состояние набора, то ошибка исчезнет.

Опять же, проблема ТОЛЬКО в использовании manualPagination: false , если я затем использую manualPagination: true управление разбиением на страницы самостоятельно, то проблем нет. Вы также можете попробовать это самостоятельно, изменив конфигурацию в tableConfig файле

Был бы очень признателен за некоторую помощь , так как я немного заблудился здесь, чего я не вижу, что вызывает эту проблему?

TLDR: useReducer в сочетании с разбиением на страницы react-таблицы вызывает бесконечный цикл повторной визуализации, который исправляется, если я изменю подход на useState вместо

Пример кода: https://codesandbox.io/s/nice-cherry-z8hn9

Вы пропускаете column переменную в качестве зависимости в useMemo оф useTableData . Добавление этого исправит проблему.

 const tableColumns = useMemo(() => {
    return buildTableColumns(columns);
  }, [columns]);
 

Вот вилка вашей песочницы, показывающая эффект изменения https://codesandbox.io/s/fervent-jepsen-657lm