MUI X DataGrid 对结果分页时仅显示一行

Question

我正在使用 MUI X Data Grid v5 和 Tanstack React Query v4 我尝试在 Datagrid 组件上使用分页，当页面最初加载时，它会按预期正常获取并加载网格。当我点击进入网格的下一页时，问题就出现了，我尝试通过向我的 api 发送跳转来重新获取数据。api 没有问题，它可以正确获取下一组数据。然而，在Datagrid中，它只渲染结果集的最后一条记录。在我的控制台和网络响应中，我看到一个包含正确数量记录的数组。如果我向后导航，它将立即呈现所有“丢失”的行，但然后继续获取 onPageChange 并正确呈现所有记录。

代码沙箱链接：

这是我尝试过的：

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我就可以跟踪当前页面，并根据页面大小更新跳过。如果我设置if已注释掉的语句，那么它将在下一页上正确加载我的行。然而，这也会导致下一页按钮设置不正确的问题，即使它抓取第二页的数据，转到下一页仍会保持其状态，就好像它仍在第一页上一样。我不确定这是否是我设置的方式，或者也许我错误地使用了数据网格的模式。我没有看到我使用 useQuery 获取数据的方式有任何问题，但也许第二双眼睛可能会有所帮助。

只是一个简短的说明 - 我对此进行了一些清理，以删除一些公司逻辑并使其更容易在这里阅读，如果有不清楚的地方请告诉我，我可以更新它，这是我一段时间以来在这里发表的第一篇文章。

Answer 1

我发现问题了！由于我是在服务器端分页，所以我没有意识到有一个用于服务器端分页的道具。我的错。我将其添加paginationMode="server"到 DataGrid 道具中，它按预期工作：https://codesandbox.io/p/sandbox/js-playground-forked-fjgm29 ?file=%2Fsrc%2FAprovalGrid.jsx%3A133 %2C6 。