React自定义分页索引问题：切换页面后索引重置

核心问题在于你当前用的是map回调里的本地索引，它只对应当前页数据的位置，自然会从0开始循环。要实现全局连续计数，需要结合当前页码和每页条数计算全局偏移量。

具体步骤 #

1. 维护当前页码的状态（比如从1开始计数），同时定义每页条数：

const [currentPage, setCurrentPage] = useState(1);
const pageSize = 20; // 每页展示20条

2. 渲染列表时，用当前页的起始偏移量加上本地索引，得到全局连续索引：

{products ? (
  products.map((item, index) => {
    // 计算全局连续索引：(当前页-1)*每页条数 + 本地索引 + 1（从1开始计数）
    const globalIndex = (currentPage - 1) * pageSize + index + 1;
    return (
      <tr key={item.id || index}> {/* 优先用数据的唯一ID作为key，避免组件复用问题 */}
        <td>{globalIndex}</td>
        {/* 其他列的渲染内容 */}
      </tr>
    );
  })
) : (
  <tr><td colSpan="全部列数">暂无数据</td></tr>
)}

注意事项 #

• 如果你的currentPage是从0开始（比如0代表第一页），公式要调整为：currentPage * pageSize + index + 1
• 不要修改map里的index（比如你之前写的index++），这会导致索引混乱，直接用计算后的globalIndex即可
• 尽量不要用index作为key，用数据项的唯一标识（如item.id）能提升列表渲染性能，避免不必要的组件重新渲染

内容的提问来源于stack exchange，提问作者Pranjal Singh Sengar