搜索功能仅适用于第一页而不适用于其他页面（使用 react-paginate 和 .filter）

Question

我开发了一个具有简单搜索功能和分页功能的页面。到目前为止，搜索功能和分页功能都运行良好，但我发现如果我尝试从 1st page 以外的任何页面（例如第 2 或第 3 页）进行搜索，搜索将不再正常工作，我只能在 1st page 中搜索，不能搜索其他内容。

这是我的分页公式：

const [pageNumber, setPageNumber] = useState(0)

const bulletinsPerPage = 8
const pagesVisited = pageNumber * bulletinsPerPage
const pageCount = Math.ceil(bulletins.length / bulletinsPerPage)

这是搜索功能的主要代码，对页面进行切片并映射 JSON 列表：

const displayBulletins = bulletins
    .filter((bulletin) => {
        if (searchTerm === '') {
            return bulletin
        } else if (bulletin.title.toLowerCase().includes(searchTerm.toLowerCase())) {
            return bulletin
        }
        return false
    })
    .slice(pagesVisited, pagesVisited + bulletinsPerPage)
    .map((bulletin) => {
        return (
            <>
                <BulletinList
                    key={bulletin.bbID}
                    bulletin={bulletin}
                    onDelete={onDelete}
                />
            </>
        );
    })

我想了解的是，如何修改当前方法，以便搜索功能可以在 1st page 以外的任何页面上运行？分页对我来说有点新鲜，所以我不确定应该从哪一部分开始。

这是我的codesandbox供参考：

codesandbox

Answer 1

您需要在搜索词更改时将页码设置为 1，因为您只显示过滤后的条目。但是您是根据条目总数计算总页数，而不是根据过滤后的条目集计算总页数。

看看这个沙箱：https://codesandbox.io/s/kind-carson-1p926

我没有用过react-paginate所以我没有将活动页面设置为1。你得自己想办法。

搜索功能仅适用于第一页而不适用于其他页面（使用 react-paginate 和 .filter）

Search function only work on the first page and not other pages (using react-paginate and .filter)

pagination

reactjs

react-paginate