如何为MUI DataGrid添加无限滚动功能？附现有组件代码

针对你的MUI DataGrid无限滚动需求，结合提供的代码，可通过以下步骤修改实现：

1. 调整状态管理 #

需要维护累积的行数据、当前加载页码，避免每次请求替换原有数据：

// 在组件内部添加状态
const [currentPage, setCurrentPage] = useState(0);
const [allRows, setAllRows] = useState([]);
const pageSize = 100; // 每次加载100条

2. 修改数据请求逻辑 #

更新GraphQL请求，基于当前页码计算偏移量，请求新数据后合并到已有行数据中：

useEffect(() => {
  const fetchStyles = async () => {
    setIsStylesLoading(true);
    try {
      const { data } = await YOUR_GRAPHQL_QUERY({
        variables: {
          offset: currentPage * pageSize,
          limit: pageSize
        }
      });
      // 合并新数据，而非替换原有数据
      setAllRows(prevRows => [...prevRows, ...data.yourStyleData]);
      setTotalCount(data.totalCount);
    } catch (error) {
      console.error('加载数据失败:', error);
    } finally {
      setIsStylesLoading(false);
    }
  };

  fetchStyles();
}, [currentPage]);

3. 添加滚动监听逻辑 #

监听DataGrid的滚动事件，当滚动接近底部时触发下一页数据加载：

const handleGridScroll = (e) => {
  const { scrollTop, clientHeight, scrollHeight } = e.currentTarget;
  // 滚动到距离底部200px时触发加载，同时避免重复请求、超出总条数请求
  if (scrollTop + clientHeight >= scrollHeight - 200 && !isStylesLoading && allRows.length < totalCount) {
    setCurrentPage(prev => prev + 1);
  }
};

4. 更新DataGrid组件属性 #

替换原有行数据绑定，添加滚动监听，调整分页相关配置：

return (
  <>
    <StyledForm sx={{ height: 'calc(100vh - 72px)', p: 0, pt: 0, position: 'relative' }}>
      <DataGrid
        rows={allRows} // 改为累积的行数据
        columns={columns}
        loading={isStylesLoading || !allRows}
        localeText={localeText}
        rowCount={totalCount}
        getRowClassName={(params: GridRowParams): string => {
          const isPinnedRow = params.row.id.includes('pinned');
          return `${classes.row} ${isPinnedRow ? classes.pinnedRow : ''}`;
        }}
        rowHeight={64}
        pageSize={pageSize}
        // 移除server分页模式，改用滚动触发的手动加载
        classes={{
          root: classes.root,
          columnHeaders: classes.columnHeaders,
          columnHeaderTitle: classes.columnHeaderTitle,
          cell: classes.cell,
          columnSeparator: classes.columnSeparator,
          footerContainer: classes.footerContainer,
        }}
        components={{
          LoadingOverlay,
          Pagination: () => null,
        }}
        componentsProps={{
          row: {
            onMouseEnter: handleRowMouseEnter,
            onMouseLeave: handleRowMouseLeave,
          },
        }}
        disableSelectionOnClick
        disableColumnMenu
        onCellClick={handleCellClick}
        onScroll={handleGridScroll} // 添加滚动监听
      />
    </StyledForm>
    <StyleDialogDrawer isEdit={isEdit} />
  </>
);

关键注意点 #

• 确保GraphQL接口支持offset和limit参数，返回对应分页数据及总条数totalCount
• 滚动触发条件可根据需求调整底部阈值（比如把200px改成0就是滚动到底部才加载）
• 必须判断!isStylesLoading防止同一时间多次请求，避免数据重复或请求冲突
• 如果有筛选、排序等功能，需要在筛选/排序重置时清空allRows并把currentPage设回0，重新加载第一页数据

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