使用React MUI库实现用户列表分页功能

import React, { useState } from 'react';
import { Grid, Typography, Container, Pagination, Avatar, makeStyles } from '@material-ui/core';
import { Email, Person } from '@material-ui/icons';
const useStyles = makeStyles((theme) => ({
  container: {
    marginTop: theme.spacing(2),
  },
  userItem: {
    display: 'flex',
    alignItems: 'center',
    marginBottom: theme.spacing(2),
  },
  avatar: {
    marginRight: theme.spacing(2),
  },
}));
const UserListPage = () => {
  const classes = useStyles();
  const [currentPage, setCurrentPage] = useState(1);
  const usersPerPage = 10; // 每页显示的用户数量
  const users = [
    { id: 1, name: 'Alice', gender: 'Female', email: 'alice@example.com' },
    { id: 2, name: 'Bob', gender: 'Male', email: 'bob@example.com' },
    // 其他用户信息
  ];
  // 计算总页数
  const totalPages = Math.ceil(users.length / usersPerPage);
  // 处理页码变更
  const handlePageChange = (event, value) => {
    setCurrentPage(value);
  };
  // 根据当前页码和每页用户数量计算需要展示的用户列表
  const startIndex = (currentPage - 1) * usersPerPage;
  const endIndex = startIndex + usersPerPage;
  const usersToShow = users.slice(startIndex, endIndex);
  return (
    <Container className={classes.container}>
      {usersToShow.map((user) => (
        <div key={user.id} className={classes.userItem}>
          <Avatar className={classes.avatar}>
            <Person />
          </Avatar>
          <div>
            <Typography variant="body1">{user.name}</Typography>
            <Typography variant="body2">{user.gender}</Typography>
            <Typography variant="body2">
              <Email fontSize="small" /> {user.email}
            </Typography>
          </div>
        </div>
      ))}
      <Grid container justifyContent="center">
        <Pagination
          count={totalPages}
          page={currentPage}
          onChange={handlePageChange}
          variant="outlined"
          shape="rounded"
        />
      </Grid>
    </Container>
  );
};
export default UserListPage;

import React, { useState, useEffect } from 'react';
import {
  Grid,
  Typography,
  Container,
  IconButton,
  CircularProgress,
  makeStyles,
} from '@material-ui/core';
import { Email, Person } from '@material-ui/icons';
const useStyles = makeStyles((theme) => ({
  container: {
    marginTop: theme.spacing(2),
  },
  userItem: {
    display: 'flex',
    alignItems: 'center',
    marginBottom: theme.spacing(2),
  },
  avatar: {
    marginRight: theme.spacing(2),
  },
  loadingContainer: {
    textAlign: 'center',
  },
}));
const UserListInfiniteScroll = () => {
  const classes = useStyles();
  const [users, setUsers] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const usersPerPage = 10; // 每页显示的用户数量
  // 模拟异步加载用户数据
  const fetchUsers = async () => {
    setIsLoading(true);
    // 模拟异步加载用户数据
    const response = await new Promise((resolve) => setTimeout(() => resolve(getMockUsers()), 1000));
    setUsers([...users, ...response]);
    setCurrentPage(currentPage + 1);
    setIsLoading(false);
  };
  useEffect(() => {
    fetchUsers();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  // 模拟获取用户数据
  const getMockUsers = () => {
    const startIndex = (currentPage - 1) * usersPerPage;
    const endIndex = startIndex + usersPerPage;
    const mockUsers = [
      { id: 1, name: 'Alice', gender: 'Female', email: 'alice@example.com' },
      { id: 2, name: 'Bob', gender: 'Male', email: 'bob@example.com' },
      // 其他用户信息
    ];
    return mockUsers.slice(startIndex, endIndex);
  };
  // 处理滚动到页面底部时加载更多数据
  const handleScroll = (event) => {
    const { scrollTop, clientHeight, scrollHeight } = event.currentTarget;
    if (scrollTop + clientHeight >= scrollHeight - 20 && !isLoading) {
      fetchUsers();
    }
  };
  return (
    <Container className={classes.container} onScroll={handleScroll}>
      {users.map((user) => (
        <div key={user.id} className={classes.userItem}>
          <Grid container spacing={2} alignItems="center">
            <Grid item>
              <Person />
            </Grid>
            <Grid item>
              <Typography variant="body1">{user.name}</Typography>
              <Typography variant="body2">{user.gender}</Typography>
              <Typography variant="body2">
                <Email fontSize="small" /> {user.email}
              </Typography>
            </Grid>
			</Grid>
			</div>
			))}
			{isLoading && (
			<div className={classes.loadingContainer}>
			<CircularProgress />
			</div>
			)}
			</Container>
			);
			};
			export default UserListInfiniteScroll;