我正在使用MUI V5和Tantack 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语句，那么它将在下一页正确加载我的行。然而，这也会导致下一页按钮设置不正确的问题，其中转到下一页使其状态保持为好像仍在第一页上，即使其抓取第二页的数据。我不确定这是我设置的方式，还是我错误地使用了数据网格的模式。我没有看到任何问题的方式im获取与useQuery，但也许第二双眼睛可能会有所帮助。
只是一个快速的说明-我清理了一下，以删除一些公司的逻辑，使其更容易阅读在这里，让我知道，如果有什么不清楚，我可以更新它，这是我的第一个职位在这里一段时间。