React mui-datatable 分页从 0 开始，而不是 1

Question

所以，我有一个 MUI 数据表，我正在尝试对服务器端进行分页，这些是数据表选项，

    const [netflixData, setNetflixData] = useState({});
    const [page, setPage] = useState(1);
    const countPerPage = 10;
    const getNetflixData = () => {
    axios.get(`/netflix/ranks/?page=${page}`, config).then(res => {
      setNetflixData(res.data);
    }).catch(err => {
      setNetflixData({});
    });
    };
    const options = {
        filter: true,
        filterType: 'multiselect',
        serverSide: true,
        count: netflixData.count,
        rowsPerPage: countPerPage,
        rowsPerPageOptions: [],
        onTableChange: (action, tableState) => {
        if (action === 'changePage') {
            setPage(tableState.page);
        } else {
            console.log('action not handled.');
        }
      },
    };
    useEffect(() =>{
        getNetflixData()
    }, [page]
    );
      <MUIDataTable
        title={"Netflix Rankings"}
        data={netflixData.results}
        columns={columns}
        options={options}
      />

基本上，在页面加载时

tableState.page

应该是

1

，但是，没有任何反应，所以当我单击“下一页”时，它会更改为

1

，第三页，

tableState.page

是

2

，所以如果我返回两次，就是

0

，不存在。

我尝试添加选项，

page: 1

，但这只是默认我到表格的第二页。关于如何在页面/表格加载上设置

tableState.page = 1

有什么想法吗？

Answer 1

尝试使用 setPage(tableState.page + 1)。状态上的页码将从一开始，而数据表上的页码将从零开始。不知道可不可以让数据表分页以一为基础

Answer 2

您应该尝试使用“page + 1”设置您的状态。下面是一个示例代码，可以帮助您更轻松地使用 MUI 数据表：

如果您使用MUI数据表，其中的DataGrid组件具有用于服务器端处理的参数。在您处理服务器端分页的情况下，您可以使用“onPaginationModelChange”并使用“model”对象，它是该函数的输出之一。您还应该将“paginationMode”设置为“服务器”，这样它将阻止 MUI 数据表的默认分页行为：

onPaginationModelChange={paginationHandler}
paginationMode = "server"

然后您可以使用“UseEffect”来更新您的行，如下所示：

useEffect(() => {
axios.get(`/netflix/ranks/?page=${page}`).then(res => {
    setNetflixData(res.data);
  }).catch(err => {
    setNetflixData({});
  })}, [page])

毕竟，MUI 数据表在服务器端使用它的示例代码将是这样的（记住将 columns 参数传递给 DataGrid）：

import * as React from "react";
import { useEffect, useState } from "react";
import { DataGrid } from "@mui/x-data-grid";

export default function MUIDataTable() {
  const [netflixData, setNetflixData] = useState({});
  const [page, setPage] = useState(1);
  const countPerPage = 10;

  const paginationHandler = (model) => {
    setPage(model.page + 1);
  };

  useEffect(() => {
    axios
      .get(`/netflix/ranks/?page=${page}`)
      .then((res) => {
        setNetflixData(res.data);
      })
      .catch((err) => {
        setNetflixData({});
      });
  }, [page]);

  return (
    <div
      style={{
        height: "100%",
        width: "95%",
        display: "flex",
        justifyContent: "center",
        alignSelf: "center",
      }}
    >
      <DataGrid
        rows={netflixData}
        columns={columns}
        initialState={{
          pagination: {
            paginationModel: { page: 0, pageSize: countPerPage },
          },
        }}
        onPaginationModelChange={paginationHandler}
        paginationMode="server" // When you are handling pagination using back-end you should set this property to "server"
      />
    </div>
  );
}

我希望这能帮助您解决问题。