React Material UI 分页

Question

要求 在 Material UI 中，通过点击数字进行分页，例如 1、2，它应该使用 limit=10 和 offset=从 10 进行 api 调用（第一次调用后）

**issue ** 它可以工作，但我需要在数字上单击两次，但功能正常工作。

通过点击分页的数字或左右箭头，调用handlePageChange方法并设置offset状态值并将偏移量作为useEffect()依赖数组等每次更改都应使用新的 offset 值

进行 api 调用

/*eslint-disable*/
import { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import PerfectScrollbar from 'react-perfect-scrollbar';
import DeleteIcon from '@material-ui/icons/Delete';
import DescriptionIcon from '@material-ui/icons/Description';
import { useNavigate } from 'react-router-dom';
import Pagination from '@material-ui/lab/Pagination';
import {
  Box,
  Card,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  createTheme,
  Tooltip,
  IconButton
} from '@material-ui/core';
import usersServices from 'src/services/usersServices';

const CustomerListResults = (props) => {
  const navigate = useNavigate();

  const handleExportData = (value) => {
    console.log('Value inside handleExportData: ', value);
    navigate('/app/exports_device_data', { state: value });
  };

  const handleDeleteUser = (user) => {
    const userId = user._id;
    console.log('DELETE USER', userId);
    const newUsers = props.users.filter((item) => item._id !== userId);
    props.newUsers(newUsers, userId);
  };

  // --------------------------------Pagination-------------------------------
  let limit = 10;
  const [users, setUsers] = useState([]);
  const [page, setPage] = useState(0);
  const [count, setCount] = useState(0);
  const [offSet, setOffSet] = useState(0);

  const retrieveCustomers = async () => {
    if (!count) {
      const res = await usersServices.getAllUsersRecordCount();
      let dataCnt = res.data.data;
      setCount(Math.ceil(dataCnt / 10));
    }

    console.log('CHEKCING useEffect(): ');
    const res = await usersServices.getAllUsers(limit, offSet);
    setUsers(res.data.data);
  };

  const handlePageChange = (event, value) => {
    setPage(value);
    setOffSet(page * 10);
  };

  useEffect(retrieveCustomers, [offSet]);

  console.log('CHECKING FOR offSet Value: ', offSet);

  return (
    <Card>
      <PerfectScrollbar>
        <Box sx={{ minWidth: 64 }}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>Name</TableCell>
                <TableCell>Email</TableCell>
                <TableCell>Phone</TableCell>
                <TableCell>Type</TableCell>
                <TableCell>Status</TableCell>
                {/* <TableCell>Data Count</TableCell> */}
                <TableCell>Action</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {users.map((user) => (
                <TableRow hover key={user.email}>
                  <TableCell>{`${user.first_name} ${user.last_name}`}</TableCell>
                  <TableCell>{user.email}</TableCell>
                  <TableCell>{user.phone_number}</TableCell>
                  <TableCell>{user.user_type}</TableCell>
                  <TableCell>{user.status}</TableCell>
                  {/* <TableCell>{user.device_data_count}</TableCell> */}
                  <TableCell>
                    <Tooltip title="Delete">
                      <IconButton
                        aria-label="delete"
                        onClick={() => handleDeleteUser(user)}
                      >
                        <DeleteIcon />
                      </IconButton>
                    </Tooltip>

                    <Tooltip title="Export">
                      <IconButton
                        aria-label="export data"
                        onClick={() => handleExportData(user)}
                      >
                        <DescriptionIcon />
                      </IconButton>
                    </Tooltip>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </Box>
      </PerfectScrollbar>
      <Pagination
        component="div"
        count={count}
        page={page}
        siblingCount={1}
        boundaryCount={1}
        variant="outlined"
        // shape="rounded"
        onChange={handlePageChange}
      />
    </Card>
  );
};

CustomerListResults.propTypes = {
  users: PropTypes.array.isRequired
};

export default CustomerListResults;

请帮帮我，在此先感谢

Answer 1

试试这个： const [page, setPage] = useState(1);