[英]Ag-Grid does not navigate to next page on adding row dynamically
我正在使用我的 React 应用程序中使用的 Ag-grid 映射到一些 state。
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 页似乎尚未准备好/创建。
请帮忙。
由于反应生命周期的性质,在调用 setState function 后,反应 state 不会立即流入农业网格组件。 (这意味着 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}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.