使用Rick and Morty API实现React分页时无法渲染页码求助

问题描述 #

基于Rick and Morty API开发React项目时，使用React Paginate组件实现分页，仅能显示「Prev」「Next」按钮和第一页页码（1），其余页码无法渲染。

问题分析 #

你的Pagination组件缺少React Paginate的核心配置项，导致页码渲染异常：

1. 未配置onPageChange回调，组件无法响应页码切换操作，也无法正确计算需渲染的页码范围
2. 未设置forcePage同步当前页码状态，组件无法识别当前选中的页码
3. 初始渲染时info为undefined，pageCount值无效，导致组件无法正常计算页码数量

解决方案 #

修改Pagination组件 #

添加必要的回调和配置项，同时处理pageCount的边界情况：

import React from 'react';
import ReactPaginate from 'react-paginate';
import './pagination.css'

const Pagination = ({ info, setPageNumber, pageNumber }) => {
  // 处理页码切换：React Paginate的selected是0起始索引，需转为1起始的实际页码
  const handlePageChange = (data) => {
    setPageNumber(data.selected + 1);
  };

  return (
    <ReactPaginate 
      className='pagination justify-content-center'
      // 确保pageCount始终为有效数字，初始或请求失败时默认显示1页
      pageCount={info?.pages || 1} 
      previousLabel='Prev'
      nextLabel='Next'
      // 绑定页码切换事件
      onPageChange={handlePageChange}
      // 同步当前页码：将1起始的pageNumber转为0起始索引
      forcePage={pageNumber - 1}
      // 可选：控制连续显示的页码数量（比如显示5个连续页码）
      pageRangeDisplayed={5}
      // 可选：控制首尾显示的页码数量
      marginPagesDisplayed={2}
    />
  )
}

export default Pagination

优化App组件的请求逻辑（可选） #

添加错误处理，避免请求失败时info为undefined导致的异常：

useEffect(() => {
  (async function () {
    try {
      const res = await fetch(api);
      const data = await res.json();
      setFetchedData(data);
    } catch (err) {
      console.error('API请求失败:', err);
      // 请求失败时设置默认数据，保证组件正常渲染
      setFetchedData({ info: { pages: 1 }, results: [] });
    }
  })();
}, [api])

修改说明 #

• onPageChange：负责将React Paginate返回的0起始索引转换为项目中使用的1起始页码，并更新状态
• forcePage：让组件同步当前的pageNumber状态，确保选中的页码正确高亮
• pageCount={info?.pages || 1}：处理初始渲染和请求失败的边界情况，保证pageCount始终是有效数字
• pageRangeDisplayed和marginPagesDisplayed：可根据需求调整，控制页面上显示的页码数量范围

内容的提问来源于stack exchange，提问作者coding beast