react-paginate搭配filter实现搜索仅首页生效的问题解决咨询

• 触发搜索时，当前pageNumber仍停留在之前分页的数值（比如第2页对应pageNumber=1），如果过滤后的结果总条数小于pageNumber * bulletinsPerPage，slice方法会切到空区间，页面无内容渲染，看起来像无响应
• 当前pageCount基于原公告数组总长度计算，过滤后的结果条数变化时，分页总页数不会同步更新，也会导致分页逻辑异常

1. 搜索词变化时重置页码到第一页 #

新增副作用监听搜索词变化，只要搜索词发生改动，就将页码重置为第一页：

// 从react中引入useEffect
import { useState, useEffect } from 'react'

// 原有状态声明保持不变
const [pageNumber, setPageNumber] = useState(0)
const [searchTerm, setSearchTerm] = useState('')

// 新增监听搜索词的副作用逻辑
useEffect(() => {
  setPageNumber(0)
}, [searchTerm])

2. 调整分页参数计算逻辑 #

先单独计算过滤后的公告列表，所有分页参数都基于过滤后的结果计算，避免原数组和过滤后数组长度不一致导致的逻辑错误：

const bulletinsPerPage = 8
// 先单独执行过滤逻辑
const filteredBulletins = bulletins.filter((bulletin) => {
  if (searchTerm === '') return true
  return bulletin.title.toLowerCase().includes(searchTerm.toLowerCase())
})
// 分页参数基于过滤后的数组长度计算
const pagesVisited = pageNumber * bulletinsPerPage
const pageCount = Math.ceil(filteredBulletins.length / bulletinsPerPage)
// 切片和渲染逻辑基于过滤后的数组执行
const displayBulletins = filteredBulletins
  .slice(pagesVisited, pagesVisited + bulletinsPerPage)
  .map((bulletin) => (
    <BulletinList
      key={bulletin.bbID}
      bulletin={bulletin}
      onDelete={onDelete}
    />
  ))

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