React分页点击URL变化但未加载下一页内容求助

看起来你的分页功能遇到了几个关键问题，导致点击页码链接后URL变了但内容没刷新，我帮你梳理下问题点并给出修复方案：

核心问题分析 #

• useEffect依赖缺失：你当前的useEffect是空依赖数组，只会在组件首次挂载时调用surveyApi，当page或者pageId变化时不会重新触发数据请求。
• page状态未同步路由参数：手动修改URL时，props.pageId会更新，但你的page状态没有跟着同步，也没有触发新的API请求。
• totalPages设置错误：你把totalPages设置成了当前page的值，这显然不对，应该用API返回的总页数（假设你的API会返回这个字段，比如results.totalPages）。
• Link点击的逻辑冗余：Link本身会触发路由跳转，不需要手动调用setPage，反而可能导致状态和路由不同步。

修复后的完整代码 #

const Survey = props => {
  const history = useHistory()
  const [selected, setSelected] = useState({})
  const { count, setCount, percentage, setPercentage } = useContext(AppContext)
  // 从props获取当前页码，作为page状态的初始值
  const pageId = parseInt(props.pageId)
  const [page, setPage] = useState(pageId)
  const [results, setResults] = useState([])
  const [totalPages, setTotalPages] = useState(5)

  // 监听pageId的变化，同步更新page状态并触发API请求
  useEffect(() => {
    setPage(pageId)
  }, [pageId])

  // 监听page的变化，触发API请求获取对应页的数据
  useEffect(() => {
    surveyApi()
  }, [page])

  const surveyApi = async () => {
    try {
      const response = await fetch(`/api/surveyoptions?page=${page}`)
      const data = await response.json()
      setResults(data.result)
      // 假设API返回的总页数字段是totalPages，根据实际情况调整
      setTotalPages(data.totalPages || 5)
    } catch (error) {
      console.error('获取分页数据失败:', error)
    }
  }

  const getPageLink = (pageNo) => {
    return `/diet/${pageNo}`
  }

  return (
    <>
      {/* 移除onClick的setPage，路由变化后会通过useEffect同步page状态 */}
      {page < totalPages && (
        <Link to={getPageLink(page + 1)} className="next">
          下一页
        </Link>
      )}
      {/* 可以加上上一页按钮 */}
      {page > 1 && (
        <Link to={getPageLink(page - 1)} className="prev">
          上一页
        </Link>
      )}
    </>
  )
}

export default Survey

关键修改说明 #

1. 新增监听pageId的useEffect：当手动修改URL导致props.pageId变化时，自动同步page状态，确保状态和路由参数一致。
2. 修改surveyApi的useEffect依赖：把依赖改成[page]，这样每次page变化都会重新请求对应页的数据。
3. 修正totalPages的赋值：改用API返回的总页数，而不是当前页码，确保分页逻辑正确。
4. 移除Link的onClick事件：Link跳转后路由参数更新，会通过第一个useEffect同步page状态，进而触发API请求，不需要手动设置page，避免状态不一致。
5. 添加错误处理：给API请求加上try/catch，方便调试错误。

这样修改后，无论是点击分页链接还是手动修改URL，页面都会正确加载对应页码的内容啦。

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