使用MUI組件分頁無法按預期作業

我使用頁碼和每頁的行數從我的資料庫中獲取資料：

  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 組件嗎？如果有更好的建議，我也愿意使用其他組件

uj5u.com熱心網友回復：

我看不到您在 PastTable 組件中呼叫查詢的位置，但如果您說查詢需要從第 1 頁開始，您必須將您的“頁面”狀態加上 1 作為變數傳遞給它。

uj5u.com熱心網友回復：

以下查詢

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

當頁面為 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,
    },
  },
});

標籤：javascript 反应 打字稿 材料-ui

上一篇：如何讓每個組件顯示正確的孩子？

下一篇：當組件被銷毀時，如何使我的鏈式可觀察計時器停止執行？