AG-Grid React服务端行模型分页API调用异常求助

要实现每次切换分页都发起API调用且无缓存，同时解决并发请求和请求丢失问题，按以下步骤调整配置和代码：

一、调整AG-Grid配置 #

修改AgGridReact组件的属性，重点控制缓存和移除不合理的并发限制：

<AgGridReact
    rowModelType='serverSide'
    rowSelection='multiple'
    enableSorting={true}
    enableFilter={true}
    floatingFilter={true}
    enableColResize={true}
    pagination={true}
    paginationPageSize={25}
    domLayout='autoHeight'
    cacheBlockSize={25} // 保持与分页每页条数一致
    maxBlocksInCache={0} // 禁用缓存块存储
    suppressServerSideCache={true} // 强制禁用服务端行模型的缓存机制
    columnDefs={columnDefs}
    rowData={rowData}
    sideBar={sideBar}
    suppressMenuHide={suppressMenuHide}
    onGridReady={onGridReady}
    defaultColDef={defaultColDef}
    onPaginationChanged={onPaginationChanged}
    rowHeight={rowHeight}
/>

二、优化数据源请求逻辑 #

在getServerSideDatasource的getRows方法中，加入请求取消机制，避免并发请求同时存在，确保每次只处理最新的分页请求：

// 全局存储当前请求的控制器，用于取消未完成的请求
let activeRequestController = null;

getServerSideDatasource = () => {
    return {
        getRows: (params) => {
            // 取消上一次未完成的请求
            if (activeRequestController) {
                activeRequestController.abort();
            }
            activeRequestController = new AbortController();
            const signal = activeRequestController.signal;

            // 构建分页请求参数（根据你的API规则调整）
            const currentPage = Math.floor(params.request.startRow / params.request.endRow) + 1;
            const pageSize = params.request.endRow - params.request.startRow;

            // 发起API请求
            fetch(`你的API地址?page=${currentPage}&pageSize=${pageSize}`, {
                signal: signal
            })
            .then(res => res.json())
            .then(data => {
                // 必须返回总行数，否则AG-Grid无法正确计算分页总数
                params.success({
                    rowData: data.dataList,
                    rowCount: data.totalCount
                });
                activeRequestController = null;
            })
            .catch(err => {
                // 忽略请求取消的错误
                if (err.name !== 'AbortError') {
                    params.fail();
                }
                activeRequestController = null;
            });
        }
    };
};

三、检查分页变更回调 #

确保onPaginationChanged中没有额外触发请求的逻辑（比如手动调用refreshServerSide），避免重复请求：

onPaginationChanged = (params) => {
    // 仅处理业务逻辑，比如记录当前页，不要调用刷新方法
    console.log('当前页:', params.api.paginationGetCurrentPage());
};

关键说明 #

• suppressServerSideCache=true：彻底禁用AG-Grid服务端行模型的缓存，确保每次分页切换都会触发getRows。
• 请求取消机制：通过AbortController取消未完成的旧请求，解决并发问题，同时避免设置maxConcurrentDatasourceRequests=1导致的请求丢失。
• 返回总行数rowCount：AG-Grid需要总行数来正确计算分页总数，否则会出现错误的页面请求（比如你遇到的第二页请求）。

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