reactjs - AgGrid 在 React 应用程序中重新渲染时崩溃

Question

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

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

标签： reactjstypescriptag-grid

Answer 1

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

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

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

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

这就足够了。

我被@benhodeda的这个github 回答引到这里，它说：

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

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