ReactJS分页回退选择时显示多余元素问题求助

核心问题：重复的key导致React DOM更新异常 #

你控制台打印的分页数组正常，但页面仍显示多余的「...」，本质是渲染时使用了重复的key。你的代码中用pgNumber作为<li>的key，当数组中出现多个"..."时，这些元素的key完全相同。React的DOM diff算法依赖唯一key识别元素，重复key会让React误以为这些是同一个元素，不会正确移除多余的DOM节点，导致旧的「...」残留。

快速修复：给元素设置唯一key #

修改渲染代码，给每个元素生成唯一key，同时禁止点击「...」触发页码切换：

{pageArray1.map((pgNumber, index) => (
    <li 
        key={pgNumber === "..." ? `ellipsis-${index}` : pgNumber} 
        className={`page-item ${currentPage == pgNumber && pgNumber != "..." ? 'active' : ''}`}
    >
        <a 
            onClick={() => pgNumber !== "..." && setCurrentPage(pgNumber)}  
            className='page-link' 
        >
            {pgNumber}
        </a>
    </li>
))}

优化分页逻辑（解决潜在的条件触发问题） #

你的原逻辑使用独立的if而非else if，虽然当前控制台数组正常，但长期来看可能出现多个条件同时触发的情况。以下是更健壮的分页逻辑，覆盖所有场景：

const generatePageArray = () => {
  const pagearray = [];
  const totalPages = nPages;
  const current = currentPage;

  // 固定显示前2页
  pagearray.push(1);
  if (totalPages > 1) pagearray.push(2);

  // 当前页离前2页过远时，添加前省略号
  if (current > 5) {
    pagearray.push("...");
  }

  // 显示当前页前后各1页（可根据需求调整范围）
  const startPage = Math.max(3, current - 1);
  const endPage = Math.min(totalPages - 2, current + 1);
  for (let i = startPage; i <= endPage; i++) {
    pagearray.push(i);
  }

  // 当前页离后2页过远时，添加后省略号
  if (current < totalPages - 4) {
    pagearray.push("...");
  }

  // 固定显示后2页
  if (totalPages > 2) pagearray.push(totalPages - 1);
  if (totalPages > 1) pagearray.push(totalPages);

  // 去重避免极端情况（如总页数过少）出现重复元素
  const uniquePageArray = [...new Set(pagearray)];
  setPageArray(uniquePageArray);
};

这个逻辑的优势：

• 始终保留首尾2页的可见性
• 动态根据当前页位置显示中间页码和省略号
• 自动去重避免重复的「...」或页码

验证效果 #

修复key后，反向切换页码时，React能正确识别每个元素的变化，移除多余的「...」；优化后的逻辑也能确保分页数组在任何场景下都符合预期。

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