React AgGrid 服务器端数据源 getRows 仅触发一次，滚动不起作用

Question

我使用 AgGridReact 组件创建了 AgGrid，使用文档中的示例设置服务器端数据源，但不知何故无限滚动不起作用。 getRows 函数仅在初始渲染时调用，网格上不显示滚动条。

import { AgGridReact } from '@ag-grid-community/react';
import {
  AllModules,
  ColumnApi,
  GridReadyEvent,
  IServerSideGetRowsParams,
  ModelUpdatedEvent,
  GridApi,
  ColDef,
  ToolPanelVisibleChangedEvent,
} from '@ag-grid-enterprise/all-modules';

export const DataGrid = <T extends unknown>({ rows, columns, onRowsFetch }: React.PropsWithChildren<Props<T>>) => {
  const gridApi = useRef<GridApi>();
  const gridColumnApi = useRef<ColumnApi>();

  return (
    <Box height="800px" width="100%" boxSizing="border-box" className="ag-theme-material">
      <AgGridReact
        modules={AllModules}
        popupParent={document.body}
        defaultColDef={defaultColDef}
        headerHeight={90}
        rowData={rows}
        rowModelType={onRowsFetch ? 'serverSide' : 'clientSide'}
        serverSideDatasource={{ getRows }}
        cacheBlockSize={100}
        blockLoadDebounceMillis={500}
        maxBlocksInCache={100}
        suppressContextMenu
        colResizeDefault="shift"
        columnDefs={columns as ColDef[]}
        columnTypes={columnTypes.reduce((ac, a) => ({ ...ac, [a]: {} }), {})}
        onGridReady={onGridReady}
        onModelUpdated={resizeColumns}
        onGridSizeChanged={resizeColumns}
        onToolPanelVisibleChanged={resizeColumns}
        suppressMovableColumns
        suppressColumnMoveAnimation
        sideBar={sideBarDef}
        suppressMenuHide
        alwaysShowVerticalScroll
      />
    </Box>
  );

  function onGridReady({ api, columnApi }: GridReadyEvent) {
    gridApi.current = api;
    gridColumnApi.current = columnApi;
    api.sizeColumnsToFit();
    api.setFilterModel({});
  }

  function resizeColumns({ api }: ModelUpdatedEvent | ToolPanelVisibleChangedEvent) {
    api.sizeColumnsToFit();
  }

  async function getRows({ request, successCallback, failCallback }: IServerSideGetRowsParams) {
    if (!onRowsFetch) {
      return;
    }

    try {
      const result = await onRowsFetch({
        startRow: request.startRow,
        endRow: request.endRow,
        sort: parseSortModel(request.sortModel),
        filter: parseFilterModel(request.filterModel),
      });
      successCallback(result.content, result.endRow ?? -1);
    } catch (error) {
      failCallback();
      throw error;
    }
  }
};

对 api 的请求不包括 startRow 和 endRow 参数（getRows 函数的 params 参数的属性 request.startRow 和 request.endRow 不知何故未定义）。

但是，api 请求仍然 returns 具有以下响应：

{
  content: [...rowData],
  endRow: 10,
  lastRow: 474,
  startRow: 0,
}

我在这里错过了什么？

Answer 1

显然，代码没有问题。问题出在 ag-grid 软件包的版本中。我已将其从 v25.3 降级为 v24.1，现在一切正常。

React AgGrid 服务器端数据源 getRows 仅触发一次，滚动不起作用

React AgGrid Server Side Datasource getRows fires only once, scroll not working

typescript

reactjs

ag-grid

ag-grid-react