React.js分页组件集成故障：页码显示NaN而非数字

看起来你的分页组件显示NaN的核心问题是没有给Pagination组件传递它依赖的必填props，同时在Characters组件里还有重复渲染的问题，咱们一步步拆解：

1. 核心原因：缺失必填Props参数 #

先看Pagination.js的组件定义，它声明了几个必须的props：data、RenderComponent、title、pageLimit、dataLimit，但你在Characters.js里调用<Pagination data={characters} />时，只传了data，剩下的几个参数都是undefined，这直接导致了页码计算出错：

• 计算总页数pages时：Math.round(data.length / dataLimit)，dataLimit是undefined，data.length / undefined结果是NaN，所以pages变成了NaN
• 生成页码组getPaginationGroup()时：pageLimit是undefined，Math.floor((currentPage - 1) / pageLimit)得到NaN，后续映射生成的页码自然也是NaN

2. 修复步骤 #

步骤1：给Pagination传递完整的必填Props #

在Characters.js里修改Pagination的调用，补充所有缺失的参数：

// 替换原来的<Pagination data={characters} />
<Pagination
  data={characters}
  RenderComponent={Character} // 传入单个角色的渲染组件
  title="Characters"
  pageLimit={5} // 控制页码栏显示多少个页码按钮（比如一次显示5个）
  dataLimit={10} // 每页显示多少条数据（比如每页10个角色）
/>

步骤2：调整RenderComponent的传参匹配 #

注意Pagination里是通过<RenderComponent key={idx} data={d} />传递数据，但你的Character组件接收的props是character，所以需要修改Pagination.js里的传参：

// 在Pagination.js的getPaginatedData.map部分，把data改成character
{getPaginatedData().map((d, idx) => (
  <RenderComponent key={idx} character={d} />
))}

步骤3：移除Characters里的重复渲染代码 #

Pagination组件内部已经会渲染分页后的数据，所以你原来写的这段全局渲染所有角色的代码要删掉：

// 删掉这段代码
<div className="grid grid-flow-col grid-cols-5 grid-rows-4 gap-4">
  {characters.map((character) => (
    <div key={character.id}>
      <Character character={character} />
    </div>
  ))}
</div>

步骤4：添加边界情况处理（可选但推荐） #

为了避免数据为空时再次出现NaN，可以在Pagination.js里给总页数计算加个判断：

// 替换原来的pages初始化
const [pages] = useState(data.length ? Math.round(data.length / dataLimit) : 1);

同时给翻页函数加边界控制，防止页码超出范围：

function goToNextPage() {
  setCurrentPage((page) => page < pages ? page + 1 : page);
}

function goToPreviousPage() {
  setCurrentPage((page) => page > 1 ? page - 1 : page);
}

3. 修复后的效果 #

完成以上修改后，分页组件会正确计算总页数、生成页码按钮，并且只渲染当前页的角色数据，不会再出现NaN的情况。

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