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

，这样我就可以跟踪当前页面，并根据 pageSize 更新跳过。 如果我设置已注释掉的

if

语句，那么它将在下一页上正确加载我的行。然而，这也会导致下一页按钮设置不正确的问题，即使它抓取第二页的数据，转到下一页仍会保持其状态，就好像它仍在第一页上一样。 我不确定这是否是我设置的方式，或者也许我错误地使用了数据网格的模式。我没有看到我使用 useQuery 获取数据的方式有任何问题，但也许第二双眼睛可能会有所帮助。

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

Answer 1

Nvm 我发现了问题！ 由于我正在对服务器端进行分页，因此我没有意识到有用于服务器端分页的道具。我的错。 我将

paginationMode='server'

添加到 DataGrid 属性中，现在它按预期工作。