React Paginate：无法在更改每页项目限制时将所选页面重置为 1

Question

我正在使用 react paginate 进行分页。 在更改每页显示的项目数时，我无法将所选页面更改为 1。点击 API 后，活动页面不会移动到“1”索引。 我必须点击它。

           <ReactPaginate
            pageCount={parseInt(Math.ceil(pageCount / limit))}
            pageRange={3}
            marginPagesDisplayed={2}
            onPageChange={handlePageChange}
            containerClassName={
              "relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
            }
            previousLinkClassName={
              "relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium "
            }
            breakClassName={
              "relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
            }
            nextLinkClassName={
              "relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium "
            }
            pageClassName={
              "bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"
            }
            disabledClassName={"text-gray-500 hover:bg-gray-50 cursor-none"}
            activeClassName={
              "z-10 bg-indigo-500 border-indigo-500 text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium hover:text-indigo-500"
            }
            initialPage={0}
          />

Answer 1

const [currentPage, setCurrentPage] = useState(0);

const handlePageChange = ({ selected: selectedPage }) => {
    setCurrentPage(selectedPage);
};

<ReactPaginate
forcePage = {currentPage}/>

命中 api 后，将 currentPage 设置为 0。

Answer 2

如果您将数据作为 prop 传递到子组件中，这就是您的操作方式

您传递一个名为 results 的状态变量，它是一个数组

<ListComponent
    results={results}
    resultsPerPage={16}
/>

然后在组件内部使用该数组来呈现数据

import React, { PropsWithChildren, useEffect, useState } from "react";

import ReactPaginate from "react-paginate";

const ListItem = React.memo((props: PropsWithChildren<any>) => {
    return (
        <Row>
            {props.currentItems && props.currentItems.map((item) => (
                <div>
                    {item}
                </div>
            ))}
        </Row>
    );
})

const ListComponent = React.memo((props: PropsWithChildren<any>) => {
    const [currentItems, setCurrentItems] = useState(null);
    const [pageCount, setPageCount] = useState(0);
    const [currentPage, setCurrentPage] = useState(0);
    const [itemOffset, setItemOffset] = useState(0);

    // if results array change, go to the first page
    useEffect(() => {
        setItemOffset(0);

        setCurrentPage(0);
    }, [props.results]);

    useEffect(() => {
        const endOffset = itemOffset + props.resultsPerPage;

        setCurrentItems(props.results.slice(itemOffset, endOffset));
        setPageCount(Math.ceil(props.results.length / props.resultsPerPage));
    }, [props.results, props.resultsPerPage, itemOffset]);

    const handlePageClick = (event) => {
        const newOffset = event.selected * props.resultsPerPage % props.results.length;

        setItemOffset(newOffset);

        setCurrentPage(event.selected);
    };

    return (
        <>
            <ListItem currentItems={currentItems} />
            <div className="d-flex justify-content-center">
                <ReactPaginate
                    nextLabel=">"
                    onPageChange={handlePageClick}
                    pageRangeDisplayed={3}
                    marginPagesDisplayed={2}
                    pageCount={pageCount}
                    forcePage={currentPage}
                    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}
                />
            </div>
        </>
    );
});

export default ListComponent;

每当你传递一个新的 results 道具时，我们将 itemOffset 和 currentPage 设置为 0 以转到第一页。