Question

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

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

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

ag-Grid：当网格位于绘图行的中间时，无法使网格绘制行。当网格处于渲染阶段时，您的代码可能称为网格API方法。为了解决这个问题，请将API调用置于超时中，例如，代替setapi.refreshView（），调用setTimeout（function（）{api.refreshView（），0}）。要查看导致刷新的代码的哪一部分，请检查此堆栈跟踪。

如果将cellRenderer替换为() => 'foo'不会发生此问题。

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

rowData道具来自Redux商店。它是由传奇派出的动作而改变的。这可能相关，也可能不相关。

Answer 1

对于遇到此问题且没有上述特定错误的任何人，当我在工具提示渲染器中有一个错误时（我试图在null上调用filter），我就遇到了此错误，并且由于HMR（热模块重装）刷新组件的方式与冷启动不同。

拔出头发并进行谷歌搜索直到每个链接都变成紫色后，我向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中。

Answer 2

使用cellRendererFramework解决了该问题。像这样：

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

这有点不方便，但是可以。

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

2 个答案: