ReactPaginate顶部和底部分页器

Question

分页项:

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 handlePageClick = (event) => {
const newOffset = (event.selected * itemsPerPage) % carsData.length;
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}
/>
</PaginateContainer>
<CarsContainer>
<Items currentItems={currentItems} />
</CarsContainer>
//Same <ReactPaginate /> (code is too big couldn't put it down)//

</>
);
};
export default CarsSection;

基本上我有两个分页器:top和bottom。问题是，当我点击底部状态的分页器时，在顶部分页器上不会改变。

尝试设置forcePage={itemOffset}，但是效果很奇怪…

Answer 1

From https://www.npmjs.com/package/react-paginate:

forcePage - Number -用父道具覆盖选定的页面。如果你想从应用状态中控制页面，可以使用这个。

const [page, setPage] = useState(0);

<ReactPaginate
forcePage={page}
onPageChange={page => setPage(page)}
...
/>