使用 MUI 组件分页无法按预期工作

Question

我使用页码和每页行数从我的数据库中获取数据：

  const { data: { customerData: recent = null } = {} } = useQuery<
  .... //removed to de-clutter
>(CD_QUERY, {
  variables: {
    input: {
      page: page,
      perPage: rowsPerPage,
    },
  },
});

我正在尝试使用允许您调整行大小和页码的 mui 组件，这是他们的演示 https://codesandbox.io/s/qesrsz?file=/demo.tsx

这是我的代码：

export const PastTable = () => {
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(5);

  const handleChangePage = (
    event: React.MouseEvent<HTMLButtonElement> | null,
    newPage: number,
  ) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (
    event: React.ChangeEvent<HTMLInputElement>,
  ) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  return (
    <Box >
      <Paper>
        <ContentContainer>
          <TableContainer style={{ border: '1px solid black', width: '85%' }}>
            <Table
              sx={{ padding: 80, scale:'100%' }}
              aria-labelledby="tableTitle"
              size={'medium'}
            >
              <TableBody>
                
                {recent?.data.map((row, index) => {
                  const labelId = `enhanced-table-checkbox-${index}`;

                  return (
                    <TableRow
                      hover
                      tabIndex={-1}
                      key={row.id}
                    >
                      <TableCell>customer name</TableCell>
                      <TableCell>
                        1234
                      </TableCell>
                      <TableCell>
                        ABCD
                      </TableCell>
                      <TableCell>
                              {calculateDuration(row.lastChangeAt, row.createdAt)}
                      </TableCell>
                      <TableCell>
                          Add icon
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          </TableContainer>
          <TablePagination
            rowsPerPageOptions={[5, 10, 100]}
            component="div"
            count={recent.totalCount}
            rowsPerPage={rowsPerPage}
            page={page}
            onPageChange={handleChangePage}
            onRowsPerPageChange={handleChangeRowsPerPage}
          />
        </ContentContainer>
      </Paper>
    </Box>
  );
};

问题： 当我按下下一步按钮时，数据没有改变但页面从 0 变为 1（控制台日志）。下次我单击它时，数据会发生变化。这是因为查询不使用第 0 页，它从第 1 页开始，因此当页面更改为 1 时，数据不会更改。

第一次点击前的数据：

第一次点击后的数据：

两者相同，仅在第三次点击时发生变化

如果我从一开始就将页面设置为 1，则值是正确的，但从一开始底部的行显示为 6-10 而不是 1-5。后退按钮也无法按预期工作

有什么方法可以使用MUI组件吗？如果有更好的建议，我也愿意使用其他组件

Answer 1

我没有看到您在 PastTable 组件中调用查询的位置，但如果您说查询需要从第 1 页开始，则必须将您的 'page' 状态加 1 传递给它它作为一个变量。

Answer 2

以下查询

  const { data: { customerData: recent = null } = {} } = useQuery<
  .... //removed to de-clutter
>(CD_QUERY, {
  variables: {
    input: {
      page: page,
      perPage: rowsPerPage,
    },
  },
});

returns页为0或1时相同的数据

Material UI 组件按预期工作，因为它更改了 page 并且还正确更改了 from & to 索引（从 1-5 到 6-10）。

尝试使用 page+1 而不是 page，如下所示：

  const { data: { customerData: recent = null } = {} } = useQuery<
  .... //removed to de-clutter
>(CD_QUERY, {
  variables: {
    input: {
      page: (page+1),
      perPage: rowsPerPage,
    },
  },
});

使用 MUI 组件分页无法按预期工作

Pagination not working as expected using MUI component

javascript

typescript

reactjs

material-ui