React中Ag-Grid动态添加行后无法自动跳转对应分页问题

问题原因 #

核心问题是React的setState是异步操作：调用setMyGridData后，网格数据状态不会立刻更新，此时gridApi.getDisplayedRowCount()返回的还是旧行数（添加第6行前是5），导致判断条件gridApi.getDisplayedRowCount() >= 5不成立，无法触发分页跳转。而添加第7行时，网格已经完成第6行的渲染并更新了行数统计，此时条件满足，跳转逻辑正常执行。

解决方案 #

方案1：用useEffect监听数据变化 #

通过useEffect监听myGridData的更新，等状态同步、网格完成渲染后，再判断是否需要跳转到最后一页：

import { useState, useEffect } from 'react';

const [myGridData, setMyGridData] = useState([]);
let gridApi = null;

// 保存gridApi引用
const onGridReady = params => {
  gridApi = params.api;
};

// 监听数据变化处理分页跳转
useEffect(() => {
  if (!gridApi) return;
  
  const totalRows = gridApi.getDisplayedRowCount();
  const pageSize = gridApi.paginationGetPageSize();
  // Ag-Grid页码从0开始，计算目标页码
  const targetPage = Math.ceil(totalRows / pageSize) - 1;
  
  // 仅当总页数超过当前页时跳转
  if (totalRows > pageSize && gridApi.paginationGetCurrentPage() !== targetPage) {
    gridApi.paginationGoToPage(targetPage);
  }
}, [myGridData]);

// 表单提交逻辑
const handleFormSubmit = () => {
  setMyGridData(current => [...current, newRowData]);
};

// 网格组件渲染
<MyAgGrid
  rowData={myGridData}
  pagination
  paginationPageSize={5}
  onGridReady={onGridReady}
  {...props}
/>

方案2：利用Ag-Grid的rowData变化事件 #

直接通过Ag-Grid提供的onRowDataChanged事件，在数据更新后触发跳转逻辑：

const [myGridData, setMyGridData] = useState([]);
let gridApi = null;

const onGridReady = params => {
  gridApi = params.api;
};

const handleRowDataChanged = () => {
  if (!gridApi) return;
  
  const totalRows = gridApi.getDisplayedRowCount();
  const pageSize = gridApi.paginationGetPageSize();
  const targetPage = Math.ceil(totalRows / pageSize) - 1;
  
  if (totalRows > pageSize && gridApi.paginationGetCurrentPage() !== targetPage) {
    gridApi.paginationGoToPage(targetPage);
  }
};

// 表单提交逻辑
const handleFormSubmit = () => {
  setMyGridData(current => [...current, newRowData]);
};

// 网格组件渲染
<MyAgGrid
  rowData={myGridData}
  pagination
  paginationPageSize={5}
  onGridReady={onGridReady}
  onRowDataChanged={handleRowDataChanged}
  {...props}
/>

两种方案都能确保在网格数据完全更新后再计算页码，解决添加第6行时跳转失效的问题。

内容的提问来源于stack exchange，提问作者copenndthagen