Ag-Grid 在动态添加行时不会导航到下一页

Question

我正在使用在我的 React 应用程序中使用的 Ag-grid 映射到某个状态。

const [myGridData, setMyGridData] = useState([]);

<MyAgGrid
    rowData={myGridData}
    pagination
    paginationPageSize={5}
    {...props}
/>

现在，我有一个表单，它接受用户输入并向网格动态添加一个新行。

因此，在保存此表单时，将调用以下代码

setMyGridData(current => [...current, newRowData]);
if (gridApi && gridApi.getDisplayedRowCount() >= gridApi.paginationGetPageSize()) {
    gridApi.paginationGoToPage(parseInt((gridApi.getDisplayedRowCount() / gridApi.paginationGetPageSize())) + 1);
}

页面大小设置为 5。因此，当我保存第 6 条记录时，我希望网格以编程方式导航到第 2 页，以便用户在网格中看到新记录。

但是在这里，虽然网格确实添加了第 6 行，但它没有导航到第 2 页，我必须手动导航才能看到第 6 条记录。但是，如果我在第 1 页并添加下一条记录（即第 7 行），它会导航到第 2 页。

因此，对于第 6 条记录，第 2 页似乎尚未准备好/创建。

Answer 1

由于反应生命周期的性质，反应状态不会在调用 setState 函数后立即流入 ag-grid 组件。 （这意味着 ag-grid 在您调用该函数时还不知道它有额外的行）

您可以跳过反应生命周期，而是使用 api.setRowData 将行数据直接设置到网格中，但是更倾向于反应生命周期的方法是使用如下效果：

const [myGridData, setMyGridData] = useState([]);

useLayoutEffect(() => {
    gridApi.paginationGoToPage(parseInt((gridApi.getDisplayedRowCount() / gridApi.paginationGetPageSize())) + 1);
}, [myGridData]);

<MyAgGrid
    rowData={myGridData}
    pagination
    paginationPageSize={5}
    {...props}
/>