当列具有 returns 一个 React 组件的 cellRenderer 时，AgGridReact rowData 更改时出错

Question

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

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

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

ag-Grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout, eg instead of api.refreshView(), call setTimeout(function(){api.refreshView(),0}). To see what part of your code that caused the refresh check this stacktrace.

将cellRenderer替换为() => 'foo'就不会出现这个问题。

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

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

Answer 1

使用 cellRendererFramework 解决了这个问题。类似于：

class MyComponent extends React.Component {
    render() { return <span />; }
}
<AgGridColumn field="status" cellRendererFramework={MyComponent} />

虽然有点不方便，但还可以。

Answer 2

对于遇到此问题但没有上述特定错误的任何人，我在工具提示渲染器中遇到错误时遇到了此错误（我试图在 null 上调用过滤器），并且问题浮出水面是因为HMR（热模块重新加载）以不同于冷启动的方式刷新我的组件。

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

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

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

因此，请将此视为 ag-grid 周围的警告灯塔，HMR 可能会吞下错误并在一段时间内引导您走上错误的道路。

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

当列具有 returns 一个 React 组件的 cellRenderer 时，AgGridReact rowData 更改时出错

Error when AgGridReact rowData changes when a column has a cellRenderer that returns a React component

javascript

redux

ag-grid

redux-saga