reactjs - Material-UI:设置 rowCount 时 DataGrid 服务器端分页问题

Question

所以我刚开始使用 Material UI我非常喜欢它。现在，我们正在开展一个项目，该项目涉及来自菲律宾特定城市的用户、员工和地址的数据，我决定使用表格将其显示给客户，因为我发现这要容易得多。所以，这个表需要进行分页、排序、过滤等，而我们是在服务器端做的。显然，客户端需要发送几个数据，如 { page: 1, page_size: 50, ....}这就是我们在我的 react 中所做的。
我现在的问题是我认为是 DataGrid .我认为该表不会重新渲染 rowCount获取 totalRows 后数据库中的数据。我有沙盒 here (PS:你必须放大输出屏幕才能看到rowsPerPageOptions。)但是你可以注意到它第一次加载下一个箭头 被禁用并且不会重新渲染时间 实际数据包括加载的行数。但是，如果您像更改页面大小一样继续导航，它就会像没有问题一样可用。
我现在有点被这个问题困住了，我什至不知道我是否以正确的方式使用它。任何帮助将不胜感激。

import { useState, useEffect } from "react";
import { DataGrid } from "@material-ui/data-grid";
import { Box } from "@material-ui/core";

const dummyColorsDB = [
  { id: 1, color: "red" },
  { id: 2, color: "green" },
  { id: 3, color: "blue" },
  { id: 4, color: "violet" },
  { id: 5, color: "orange" },
  { id: 6, color: "burgundy" },
  { id: 7, color: "pink" },
  { id: 8, color: "yellow" },
  { id: 9, color: "magenta" },
  { id: 10, color: "random color" },
  { id: 11, color: "another random color" },
  { id: 12, color: "last one" }
];

export default function App() {
  const [data, setData] = useState({
    loading: true,
    rows: [],
    totalRows: 0,
    rowsPerPageOptions: [5, 10, 15],
    pageSize: 5,
    page: 1
  });

  const updateData = (k, v) => setData((prev) => ({ ...prev, [k]: v }));

  useEffect(() => {
    updateData("loading", true);

    setTimeout(() => {
      const rows = dummyColorsDB.slice(
        (data.page - 1) * data.pageSize,
        (data.page - 1) * data.pageSize + data.pageSize
      );

      console.log(rows);

      updateData("rows", rows);
      updateData("totalRows", dummyColorsDB.length);
      updateData("loading", false);
    }, 500);
  }, [data.page, data.pageSize]);

  return (
    <Box p={5}>
      <DataGrid
        density="compact"
        autoHeight
        rowHeight={50}
        //
        pagination
        paginationMode="server"
        loading={data.loading}
        rowCount={data.totalRows}
        rowsPerPageOptions={data.rowsPerPageOptions}
        page={data.page - 1}
        pageSize={data.pageSize}
        rows={data.rows}
        columns={[{ field: "color", headerName: "Color", flex: 1 }]}
        onPageChange={(data) => {
          updateData("page", data.page + 1);
        }}
        onPageSizeChange={(data) => {
          updateData("page", 1);
          updateData("pageSize", data.pageSize);
        }}
      />
    </Box>
  );
}

Answer 1

当您通过像这样多次调用来更新组件状态时:

updateData("rows", rows);
updateData("rowCount", dummyColorsDB.length);
updateData("loading", false);

您的 updateData电话 setState但因为 setState异步执行，它们不会同时更新。实际上，第一次渲染时分页不起作用的原因是因为您设置了网格 rows在设置其 rowCount 之前.我的猜测是，在检查代码库后，这是一个 Material-UI 错误。他们似乎没有添加 state.options.rowCount 到 useEffect 中的依赖数组所以更新时不会重新渲染 rowCount之后。
当您稍微推迟每个调用时，这会更清楚。下面的代码不起作用。

// set rows first
updateData("rows", rows);

setTimeout(() => {
  // set rowCount later
  updateData("rowCount", dummyColorsDB.length);
  updateData("loading", false);
}, 100);

但是尝试设置 rowCount首先，分页再次工作

// set rowCount first
updateData("rowCount", dummyColorsDB.length);

setTimeout(() => {
  updateData("rows", rows);
  updateData("loading", false);
}, 100);

另一种解决方案是同时更新所有相关状态:

setData((d) => ({
  ...d,
  rowCount: dummyColorsDB.length,
  rows,
  loading: false
}));

现场演示