AGGrid（服务端行模型）gridReady中getDisplayedRowCount返回异常

我在使用AG Grid的服务端行模型（Server Side Row Model）时，编写了gridReady事件处理函数，期望在函数执行完毕后获取表格的显示行数，但遇到了问题：调用event.api.getDisplayedRowCount()始终返回1，即便实际行数远大于1；只有选中某一行后，该方法才会返回符合预期的数值。

相关代码如下：

const onGridReadyHandler = useCallback(
  async (event: GridReadyEvent) => {
    if (serverSide) {
      if (serverSide.onGridReady) {
        await serverSide.onGridReady(event); 
      }
      // 其他逻辑...
    }
    setGridReady(true);
    console.log('Displayed rows : ' + event.api.getDisplayedRowCount()); // 即便行数>1也返回1
  },
  // 依赖项...
);

问题原因 #

服务端行模型的核心是异步加载数据：

• gridReady事件仅标志Grid完成了自身的初始化（比如列配置、容器渲染），但此时服务端的数据请求可能还在进行中，Grid还没完成数据的接收、解析和渲染，所以getDisplayedRowCount()只能捕捉到当前已渲染的少量行（通常是占位行或第一行的初始渲染状态）。
• 当你选中行时，Grid已经完成了数据的加载和全量渲染，此时模型已经更新，调用方法自然能得到正确的行数。

解决方案 #

不要在gridReady事件中直接获取显示行数，改用Grid提供的数据加载完成事件来监听：

• 推荐使用modelUpdated事件：该事件会在Grid的数据模型更新（包括服务端数据加载完成、分页切换、过滤排序等）后触发，此时调用getDisplayedRowCount()能得到准确的显示行数。
• 示例代码调整：

// 新增modelUpdated事件处理
const onModelUpdatedHandler = useCallback((event: ModelUpdatedEvent) => {
  console.log('Displayed rows : ' + event.api.getDisplayedRowCount()); // 此时返回正确数值
}, []);

// 在Grid组件中配置该事件
<AgGridReact
  rowModelType="serverSide"
  onGridReady={onGridReadyHandler}
  onModelUpdated={onModelUpdatedHandler}
  // 其他配置...
/>

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