ReactPaginate上下分页器状态不同步问题求助

问题核心在于你给forcePage传了偏移量itemOffset，但ReactPaginate的forcePage需要的是从零开始的当前页码，不是数据偏移量。按下面步骤修改即可同步两个分页器：

1. 计算当前页码 #

在组件里基于itemOffset和itemsPerPage计算当前选中的页码：

const currentPage = Math.floor(itemOffset / itemsPerPage);

2. 给两个ReactPaginate组件添加forcePage属性 #

把计算好的currentPage传给两个分页器的forcePage，让它们基于同一个状态渲染选中页。

3. 简化handlePageClick逻辑 #

原来的取模操作没必要，ReactPaginate会根据pageCount限制可点击的页码，直接用选中的页码计算偏移量即可。

修改后的完整代码 #

const CarsSection = () => {
  const itemsPerPage = 8;
  const [itemOffset, setItemOffset] = useState(0);
  const endOffset = itemOffset + itemsPerPage;
  const currentItems = carsData.slice(itemOffset, endOffset);
  const pageCount = Math.ceil(carsData.length / itemsPerPage);
  // 计算当前页码
  const currentPage = Math.floor(itemOffset / itemsPerPage);

  const handlePageClick = (event) => {
    // 直接用选中的页码计算新偏移量
    const newOffset = event.selected * itemsPerPage;
    setItemOffset(newOffset);
  };

  return (
    <>
      <PaginateContainer>
        <ReactPaginate
          nextLabel=">"
          onPageChange={handlePageClick}
          pageRangeDisplayed={3}
          marginPagesDisplayed={2}
          pageCount={pageCount}
          previousLabel="<"
          pageClassName="page-item"
          pageLinkClassName="page-link"
          previousClassName="page-item"
          previousLinkClassName="page-link"
          nextClassName="page-item"
          nextLinkClassName="page-link"
          breakLabel="..."
          breakClassName="page-item"
          breakLinkClassName="page-link"
          containerClassName="pagination"
          activeClassName="active"
          renderOnZeroPageCount={null}
          // 添加forcePage绑定当前页码
          forcePage={currentPage}
        />
      </PaginateContainer>
      <CarsContainer>
        <Items currentItems={currentItems} />
      </CarsContainer>
      {/* 底部分页器，同样添加forcePage */}
      <PaginateContainer>
        <ReactPaginate
          nextLabel=">"
          onPageChange={handlePageClick}
          pageRangeDisplayed={3}
          marginPagesDisplayed={2}
          pageCount={pageCount}
          previousLabel="<"
          pageClassName="page-item"
          pageLinkClassName="page-link"
          previousClassName="page-item"
          previousLinkClassName="page-link"
          nextClassName="page-item"
          nextLinkClassName="page-link"
          breakLabel="..."
          breakClassName="page-item"
          breakLinkClassName="page-link"
          containerClassName="pagination"
          activeClassName="active"
          renderOnZeroPageCount={null}
          forcePage={currentPage}
        />
      </PaginateContainer>
    </>
  );
};

export default CarsSection;

这样修改后，不管点击顶部还是底部分页器，两个组件都会基于currentPage同步选中状态，数据列表也会跟着更新。

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