如何在React中对接分页式API实现点击分页加载数据？（附现有代码）

看起来你已经搭好了基础框架，但需要调整几个核心点来适配后端分页API（而非本地切分数据）。我直接给你调整后的可运行代码，再逐一解释改动原因：

修改后的完整代码 #

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import ReactPaginate from 'react-paginate';
import './App.css'

function App() {
  // 用当前页码替代offset，和API的page参数对应（API从1开始）
  const [currentPage, setCurrentPage] = useState(1);
  // 存储原始用户数据，而非提前生成的JSX（React最佳实践）
  const [users, setUsers] = useState([]);
  // 和API保持一致，每页返回6条数据
  const [perPage] = useState(6);
  // 总页数从API返回的total_pages字段获取
  const [pageCount, setPageCount] = useState(0);

  const getData = async () => {
    try {
      // 请求时带上当前页码参数，获取对应页的数据
      const res = await axios.get(`https://reqres.in/api/users?page=${currentPage}`);
      const { data, total_pages } = res.data;
      setUsers(data);
      // 用API返回的总页数设置分页组件的总页数
      setPageCount(total_pages);
    } catch (err) {
      console.error('加载数据失败:', err);
    }
  };

  const handlePageClick = (e) => {
    // ReactPaginate的selected是从0开始的索引，要转成API需要的从1开始的页码
    const targetPage = e.selected + 1;
    setCurrentPage(targetPage);
  };

  useEffect(() => {
    // 每次当前页码变化时，重新请求对应页的数据
    getData();
  }, [currentPage])

  return (
    <div className="App">
      {/* 循环原始用户数据生成视图，分离数据和渲染逻辑 */}
      {users.map(user => (
        <div key={user.id}>
          <table>
            <tr>
              <th>{user.id}</th>
              <th>{user.email}</th>
              <th>{user.first_name}</th>
              <th>{user.last_name}</th>
              <td><img src={user.avatar} alt={`${user.first_name} ${user.last_name}`} /></td>
            </tr>
          </table>
        </div>
      ))}
      <ReactPaginate
        previousLabel={"prev"}
        nextLabel={"next"}
        breakLabel={"..."}
        breakClassName={"break-me"}
        pageCount={pageCount}
        marginPagesDisplayed={2}
        pageRangeDisplayed={5}
        onPageChange={handlePageClick}
        containerClassName={"pagination"}
        subContainerClassName={"pages pagination"}
        activeClassName={"active"}
      />
    </div>
  );
}

export default App;

核心改动说明 #

1. 状态逻辑优化：

   • 移除了offset，改用currentPage直接对应API的page参数，逻辑更清晰
   • users状态存储原始数据而非JSX，让数据管理和视图渲染职责分离，便于后续维护

2. API请求适配：

   • 请求URL拼接了page=${currentPage}参数，每次点击分页按钮时请求对应页码的后端数据，而非一次性拉取全部数据再本地切分
   • 直接使用API返回的total_pages作为分页组件的总页数，避免本地计算的误差

3. 分页事件修正：

   • ReactPaginate的e.selected是从0开始的索引，而你的APIpage参数从1开始，所以需要+1转换为正确的请求页码

4. 渲染逻辑调整：

   • 将生成用户列表JSX的逻辑从getData移到组件返回部分，符合React的数据流规范，代码可读性更强

这样修改后，点击分页按钮就会自动请求对应页码的API数据并展示了。

内容的提问来源于stack exchange，提问作者How to Program