当列具有返回 React 组件的 cellRenderer 时，AgGridReact rowData 更改时出错

Posted 2023-03-28

【中文标题】当列具有返回 React 组件的 cellRenderer 时，AgGridReact rowData 更改时出错

【英文标题】：Error when AgGridReact rowData changes when a column has a cellRenderer that returns a React component

【发布时间】：2019-08-29 19:27:02

【问题描述】：

给定一个AgGridReact 组件，如下所示：

<AgGridReact rowData=myData>
    <AgGridColumn field="status" cellRenderer=() => <span /> />
</AgGridReact>

当我将不同的值传递给 myData 属性时，我收到以下错误：

ag-Grid：当网格位于绘制行的中间时，无法让网格绘制行。当网格处于渲染阶段时，您的代码可能调用了网格 API 方法。为了克服这个问题，将 API 调用设置为超时，例如，调用 setTimeout(function()api.refreshView(),0)，而不是 api.refreshView()。要查看导致刷新的代码部分，请检查此堆栈跟踪。

如果将cellRenderer 替换为() => 'foo'，则不会出现此问题。

我没有调用任何网格 API 方法。从堆栈跟踪来看，有问题的 API 调用是内部调用（因为 rowData 已更改而被调用）。

rowData 属性来自 Redux 商店。由于从 saga 派发的动作，它正在发生变化。这可能相关，也可能不相关。

【问题讨论】：

您能否确认您是使用任何单元格样式还是使用枚举属性来呈现 rowData？

我在一个类似于问题中的示例代码的最小示例中重现了该问题，没有样式。

【参考方案1】：

对于遇到此问题且没有上述特定错误的任何人，当我在工具提示渲染器中遇到错误时遇到此错误（我试图在 null 上调用过滤器），问题浮出水面是因为 HMR ( Hot Module Reloading) 刷新我的组件的方式与冷启动时不同。

在拔出一些头发并用谷歌搜索直到每个链接都变成紫色之后，我向 ag-grid 本身添加了一些自定义日志记录。在 ag-grid-community.amd.js（您可能需要一个不同的）中，我将以下内容添加到 getLockOnRefresh()，这样我就可以了解调用 getLockOnRefresh 的内容，并在此引发此错误。

console.log('hi there', throw new Error().stack)

然后我在 web 检查器中添加了一些调试语句，最终在我的工具提示渲染器中发现了实际错误。

因此，请将此视为围绕 ag-grid 和 HMR 的警告信标，可能会吞下错误并在一段时间内将您引向错误的道路。

这可能无关紧要，但如果相关的话，我也在使用 React、Redux、Immer，并且我的网站是在 Electron 中加载的。

【参考方案2】：

使用cellRendererFramework 解决了这个问题。比如：

class MyComponent extends React.Component 
    render()  return <span />; 

<AgGridColumn field="status" cellRendererFramework=MyComponent />

这有点不方便，但可以。

【讨论】：

你能帮我解决这个问题吗？***.com/questions/56231178/…