Сбой AgGrid при повторном рендеринге в приложении React

Question

У меня есть приложение React + Typescript, которое отображает данные с помощью AgGrid. Данные извлекаются с сервера, а затем передаются в AgGrid, и у нас есть несколько опций, с которыми пользователь может взаимодействовать, которые потенциально могут изменить отображаемые данные, такие как фильтры, подкачка и некоторые другие настраиваемые параметры.

Отображаемые данные сначала выбираются, а затем отображаются полностью. Например, мы выбираем 25 строк и отображаем их все, мы не используем ни одну из функций подкачки AgGrid.

Если пользователь вносит изменения в один из параметров, а данные не изменяются (например, добавляя фильтр, который захватывает каждый уже отображаемый элемент), данные будут повторно загружен, а затем снова передан в AgGrid, однако это приведет к тому, что AgGrid взломает sh.

Это происходит только тогда, когда данные не меняются.

Возникающая ошибка:

The above error occurred in the <AgGridReact> component:
    in AgGridReact (at ag-collections/index.tsx:250)
    in div (at ag-collections/index.tsx:240)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at ag-collections/index.tsx:225)
    in main (at main/index.tsx:59)
    in div (at main/index.tsx:36)
    in Component (created by WithStyles(Component))
    in WithStyles(Component) (at ag-collections/index.tsx:218)
    in TableAg (created by Context.Consumer)
    in Connect(TableAg) (created by Connect(TableAg))
    in Connect(TableAg) (created by Context.Consumer)
    in withRouter(Connect(TableAg)) (created by WithStyles(withRouter(Connect(TableAg))))
    in WithStyles(withRouter(Connect(TableAg))) (created by Context.Consumer)
    in Route (at routes.tsx:20)
    in Switch (at routes.tsx:16)
    in Routes (at app.tsx:50)
    in ThemeProvider (at app.tsx:48)
    in Route (created by QueryParamProvider)
    in QueryParamProvider (at app.tsx:47)
    in Provider (at app.tsx:46)
    in App (at src/index.tsx:8)
    in Router (created by HashRouter)
    in HashRouter (at src/index.tsx:7)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit <link removed> to learn more about error boundaries. index.js:1437
TypeError: can't define property "areEquivPropertyTracking": Array is not extensible
changeDetectionService.js:147
TypeError: can't define property "areEquivPropertyTracking": Array is not extensible

Рассматриваемая строка в changeDetectionService.js:

      if (newA) {
        a.areEquivPropertyTracking = []; // LINE 147
      } else if (a.areEquivPropertyTracking.some(function (other) {
        return other === b;
      })) return true;

      if (newB) {
        b.areEquivPropertyTracking = [];
      } else if (b.areEquivPropertyTracking.some(function (other) {
        return other === a;
      })) {
        return true;
      }

Насколько я могу судить, они пытаются создать новый элемент на объекте a, но это запрещено.

Если мне нужно предоставить что-нибудь еще, я могу попытаться это сделать. Как я могу go исправить это?

Answer 1

Если предоставляемые данные неизменяемы, вы не сможете выполнить глубокую проверку, поскольку это пытается расширить предоставленные объекты.

Однако можно использовать несколько стратегий обнаружения изменения данных.

Я решил эту проблему, добавив в компонент AgGridReact следующее:

import { ChangeDetectionStrategyType } from 'ag-grid-react/lib/changeDetectionService'
...
<AgGridReact
rowDataChangeDetectionStrategy={ChangeDetectionStrategyType.IdentityCheck}
...
/>

, которого будет достаточно.

Меня привел к этому this ответ на github от @benhodeda, в котором говорится:

привет :) У меня была аналогичная проблема, когда я мигрировал наш объект состояния использовать immer вместо неизменяемого JS. Мы привязываем состояние к свойству rowData AgGridReact, и когда мы фильтруем данные (фильтрация на стороне сервера), приложение было cra sh при обнаружении изменений. Я добавил опору deltaRowDataMode вместе с getRowNodeId = {row => row.id} в компонент AgGridReact.

вы можете прочитать больше здесь: https://www.ag-grid.com/javascript-grid-data-update/