React组件手动输入页码后分页导航显示异常问题

错误原因分析 #

你的分页页码生成逻辑存在三个核心问题：

1. 起始位置逻辑不合理：当选中页码selectedPageNumber > 5时，使用selectedPageNumber -5作为起始索引，会导致选中页接近5时（比如第6页），起始索引回到1，直接显示从第1页开始的大量连续页码，而非聚焦当前页附近的页码。
2. 结束位置取值过大：selectedPageNumber +6的计算方式会让显示范围拉得过长（比如选中第6页时，结束索引是12，会显示1-11共11个页码），且未限制最大范围为总页数，总页数较大时会出现连续页码过多的情况。
3. 条件判断不一致：起始位置用selectedPageNumber <=5判断，结束位置却用selectedPageNumber <5，导致第5页和第6页的显示页码数量突然变化，逻辑不统一。

修复方案 #

我们可以调整逻辑，固定显示的连续页码数量，让当前页尽量居中，同时处理边界情况：

// 定义要显示的连续页码数量（可根据需求调整，这里设为9）
const visiblePageCount = 9;
// 计算起始页码：确保当前页居中，同时不小于1，不超出总页数范围
const startPage = Math.max(1,
  selectedPageNumber <= Math.ceil(visiblePageCount / 2)
    ? 1
    : Math.min(selectedPageNumber - Math.floor(visiblePageCount / 2), totalPages - visiblePageCount + 1)
);
// 计算结束页码：不超过总页数+1（因为数组生成的是0到totalPages的序列）
const endPage = Math.min(startPage + visiblePageCount, totalPages + 1);

{Array.from({ length: totalPages + 1 }, (_, i) => i)
  .slice(startPage, endPage)
}

逻辑说明 #

• 当选中页处于前半段（比如第1-5页，对应visiblePageCount=9的情况），直接从第1页开始显示，最多显示9个页码
• 当选中页处于后半段（比如总页数20，选中第18页），起始页码会调整为20-9+1=12，显示12-20的页码
• 中间页码（比如第10页）会显示当前页前后各4个页码（6-14），保持当前页在导航中间位置
• 自动处理总页数小于visiblePageCount的情况，此时会显示所有页码

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