如何避免Ag网格出现React内存泄漏？

Question

我在此 plinker 中有代码：https://plnkr.co/edit/MiRhkcG9sZTZO74P?preview

单击切换按钮应该会破坏网格并卸载组件（我认为这应该释放内存资源），但是检查内存选项卡并获取堆快照，我仍然看到

gridAPI

和

rowNodes

之后仍然存在网格被破坏。 ，我有什么技巧可以解决这个问题吗？ 堆快照的屏幕截图在这里

Answer 1

我也有同样的问题， 尝试实现

getRowId

方法
https://www.ag-grid.com/react-data-grid/row-ids/#application-assigned-ids

Answer 2

我尝试遵循 Ofry 发布的其他答案的建议，并且成功了！

我正在使用 TypeScript，但同样的原则应该适用于 JavaScript，没有特殊问题。

之前，当 AG Grid 调用我在

valueSetter

中定义的

colDef

时，我在控制台中遇到了如下错误：

Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

在我的 React 功能组件代码的主块中，我添加了以下方法定义：

const MyEditor: React.FC<IMyEditorProps> = (props: IPoisEditorProps) => {
    const getRowid = useMemo<GetRowIdFunc>(() => {
        return (params: GetRowIdParams) => params.data.id;
    }, []);
    ...
}

这里，

params.data

是您所在行的数据对象。就我而言，该对象类有一个

id

字段，该字段始终设置且唯一，因此适合用作行 id。根据您自己的情况调整此字段选择。

然后使用新方法如下：

<AgGridReact
    columnDefs={columnDefs}
    ...
    getRowId={getRowid}
    ...
    rowData={rowData}
/>

错误现在应该消失了，并且值设置器按预期工作。