React实现带首尾页及上下页按钮的列表分页功能求助

以下是完全匹配你需求的修正后代码：

import { useState, useEffect } from 'react';
import axios from 'axios';
import Grid from '@mui/material/Grid';
import Card from './Card'; // 替换为你实际的Card组件引入路径
import ReactPaginate from 'react-paginate';

function App() {
  const [data, setData] = useState([]);
  const [perPage] = useState(12);
  const [pageCount, setPageCount] = useState(0);
  const [fullData, setFullData] = useState([]);
  // 新增状态：记录当前已加载的最大页码（react-paginate返回的页码从0开始计数）
  const [currentMaxPage, setCurrentMaxPage] = useState(0);

  const getData = async () => {
    const res = await axios.get(`https://jsonplaceholder.typicode.com/todos`);
    // 修复原代码取值错误：jsonplaceholder的todos接口直接返回数组，无items字段
    const allData = res.data;
    setFullData(allData);
    // 初始化默认加载第一页12条数据
    const initialSlice = allData.slice(0, perPage);
    setData(initialSlice);
    setPageCount(Math.ceil(allData.length / perPage));
  };

  const handlePageClick = e => {
    const selectedPage = e.selected;
    // 点击第一页时，直接重置为仅显示前12条
    if (selectedPage === 0) {
      setData(fullData.slice(0, perPage));
      setCurrentMaxPage(0);
      return;
    }
    // 点击的页码大于已加载的最大页码时，追加新数据
    if (selectedPage > currentMaxPage) {
      const newSlice = fullData.slice(currentMaxPage * perPage, (selectedPage + 1) * perPage);
      setData(prev => [...prev, ...newSlice]);
      setCurrentMaxPage(selectedPage);
    } else {
      // 点击已加载过的历史页码时，直接截取对应长度的数据即可
      setData(fullData.slice(0, (selectedPage + 1) * perPage));
    }
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <div className="App">
      <Grid
        container
        spacing={2}
        direction="row"
        justify="flex-start"
        alignItems="flex-start"
      >
        {data?.length > 0 &&
          data.map((cardInfo, i) => {
            return (
              <div key={i}>
                <Grid
                  item
                  xs={12}
                  sm={6}
                  md={3}
                  lg
                  xl
                  direction="row"
                  justify="flex-start"
                  alignItems="flex-start"
                >
                  <Card data={cardInfo} />
                </Grid>
              </div>
            );
          })}
      </Grid>
      <ReactPaginate
        previousLabel={'prev'}
        nextLabel={'next'}
        breakLabel={'...'}
        breakClassName={'break-me'}
        pageCount={pageCount}
        marginPagesDisplayed={12}
        pageRangeDisplayed={2}
        onPageChange={handlePageClick}
        containerClassName={'pagination'}
        subContainerClassName={'pages pagination'}
        activeClassName={'active'}
      />
    </div>
  );
}

export default App;

核心修改点：

• 修复了接口数据取值错误，原代码res.data.items的写法不符合jsonplaceholder接口的返回结构
• 新增currentMaxPage状态记录已加载的最大页码，避免重复加载数据
• 重写了分页点击逻辑，完全匹配需求：点击更高页码追加数据，点击第一页重置为仅显示前12条
• 补充了列表渲染的key属性，避免React运行时报错
• 优化了数据存在性判断的语法，代码更简洁易读

内容的提问来源于stack exchange，提问作者midhun k