AgGrid 在 React 应用程序中重新渲染时崩溃答案

【问题标题】：AgGrid crashes on re-render in React applicationAgGrid 在 React 应用程序中重新渲染时崩溃
【发布时间】：2020-09-16 18:29:15
【问题描述】：

我有一个使用 AgGrid 显示数据的 React + Typescript 应用程序。数据从服务器获取，然后馈送到 AgGrid，我们有多个选项可供用户交互，这些选项可能会更改显示的数据，例如过滤器、分页和其他一些自定义内容。

显示的数据首先被提取，然后完整显示。例如，我们获取 25 行并显示所有这些，我们没有使用任何 AgGrid 的分页功能。

如果用户对其中一个参数进行了更改，而数据没有更改（例如，添加一个过滤器来捕获已显示的每个项目），则数据将被重新获取，然后再次馈送到 AgGrid，但这会导致 AgGrid 崩溃。

这只发生在数据不变的情况下。

发生的错误如下：

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 上创建一个新项目，但这是被禁止的。

如果我需要提供其他任何东西，我可以尝试这样做。我该如何解决这个问题？

【问题讨论】：

您需要提供一个可重现的示例，例如StackBlitz

标签： reactjs typescript ag-grid

【解决方案1】：

如果提供的数据是不可变的，那么您将无法执行深度检查，因为这会尝试扩展提供的对象。

但是，可以使用多种数据更改检测策略。

我通过在 AgGridReact 组件中添加以下内容解决了这个问题：

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

这就足够了。

@benhodeda 的this github 回答把我引到了这里，上面写着：

嗨 :) 当我将状态对象迁移到使用 immer 而不是 immutableJS 时，我遇到了类似的问题。我们将状态绑定到 AgGridReact 的 rowData 属性，当我们过滤数据（服务器端过滤）时，应用程序在进行更改检测时崩溃了。我在 AgGridReact 组件上添加了 deltaRowDataMode 属性和 getRowNodeId={row => row.id}。

你可以在这里阅读更多：https://www.ag-grid.com/javascript-grid-data-update/

【讨论】：

【解决方案2】：

这也可以通过使用设置为true 的immutableData 属性来处理 - 然后网格将默认使用ChangeDetectionStrategyType.IdentityCheck 作为rowDataChangeDetectionStrategy

【讨论】：