MUI X DataGrid v5分页时仅渲染单行数据的问题排查

问题现象 #

• 页面初始加载时，数据获取与DataGrid渲染均正常
• 点击下一页按钮，API返回了正确的分页数据集，但DataGrid仅渲染结果集中的最后一条记录
• 返回上一页时，会短暂显示所有缺失的行，随后重新获取数据并正常渲染全部记录

实现代码 #

const ApprovalGrid = () => {
  const authorization= useContext(AuthorizationContext);
  const [skip, setSkip] = useState(0);
  const [page, setPage] = useState(0);
  const pageSize = 10;
  const fetchData = async () => {
    return await doFetch(
      '/get/approvals', {
        query: {pageSize: pageSize, skip: skip },
      }),
      authorization,
    );
  };

  const { data, isLoading, isFetching, isRefetching, refetch } = useQuery(
    ['Approvals-viewAll', page],
    async () => await fetchData(),
    {
      // cacheTime: 0,
      refetchOnWindowFocus: false,
      keepPreviousData: true,
    },
  );

  const handlePageChange = (newPage) => {
    let newSkip = newPage * pageSize;
    if (data && data.count > newSkip) {
      setPage(newPage);
      setSkip(newSkip);
    }
  };

  useEffect(() => {
    refetch();
  }, [skip, page]);

  // if (isLoading || isFetching || isRefetching) {
  //   return <div>loading...</div>;
  // }
  return (
    <Box mb="12px" height="calc(100% - 16px)">
      <h1>Approvals</h1>
      <Box height="calc(100% - 150px)">
        <DataGrid
          // rows={isLoading || isFetching || isRefetching ? [] : data?.results}
          rows={data?.results}
          columns={cols}
          getRowId={(row) => row.id}
          loading={isLoading || isFetching || isRefetching}
          pagination
          pageSize={pageSize}
          rowCount={data?.count}
          onPageChange={handlePageChange}
        />
      </Box>
    </Box>
  );
};

额外尝试与新问题 #

通过skip和page状态跟踪当前分页，根据pageSize计算skip值。若启用注释的加载状态判断（直接返回loading组件），下一页的行可以正常加载，但会导致分页按钮状态异常：切换到下一页后，按钮仍显示处于第一页的状态，尽管已经获取到第二页的数据。

不确定是实现逻辑问题还是DataGrid的使用模式有误，希望得到排查建议。

注：已移除公司内部逻辑以简化代码，细节可补充说明。

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