React分页功能异常求助：浏览器回退与URL参数修改失效

问题1：浏览器回退行为异常&历史记录警告 #

原因 #

• setSearchParams默认使用history.replaceState，只会替换当前历史条目，不会新增，导致所有分页状态共用一个历史记录，回退时无法回到之前的分页。
• 初始化逻辑优先从sessionStorage读取分页值，导致URL和历史记录不同步。
• 多个useEffect存在竞态，互相触发导致历史记录混乱。

解决措施 #

• 调用setSearchParams时传入{ replace: false }，强制使用history.pushState新增历史条目。
• 初始化时优先从URL读取分页参数，保证URL与状态同步。
• 优化useEffect触发逻辑，避免循环执行。

问题2：手动修改URL搜索参数无响应 #

原因 #

• 初始化时优先读取sessionStorage的值，手动修改URL后sessionStorage未更新，导致状态仍为旧值。
• 使用正则解析URL参数的方式不严谨，若存在其他参数会出错。
• 监听searchParams的useEffect直接更新currentPage，触发另一个依赖currentPage的useEffect，导致状态回滚或重复执行。

解决措施 #

• 初始化currentPage时优先从URL获取参数，再fallback到sessionStorage或默认值。
• 使用searchParams.get('p')正确解析分页参数，替代正则匹配。
• 增加状态判断，仅当URL参数与当前状态不同时才更新，避免循环触发。

修改后的完整代码 #

import { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';

// 初始化时优先从URL取参数，再fallback到sessionStorage或默认1
const [currentPage, setCurrentPage] = useState<number>(() => {
  const params = new URLSearchParams(window.location.search);
  const pageFromUrl = params.get('p');
  if (pageFromUrl && !isNaN(Number(pageFromUrl))) {
    return Number(pageFromUrl);
  }
  return Number(sessionStorage.getItem("current page") || 1);
});
const [pagesCount, setPagesCount] = useState(0);
const [itemsCount, setItemsCount] = useState(0);
const [productData, updateProductData] = useState([]);
const [searchParams, setSearchParams] = useSearchParams();

// 初始化：计算总页数+获取初始数据
useEffect(() => {
  calcPagesCount();
  getData();
}, []);

// 监听URL参数变化，同步到currentPage
useEffect(() => {
  const pageFromParams = searchParams.get('p');
  const parsedPage = pageFromParams ? Number(pageFromParams) : 1;
  // 仅当参数有效且与当前状态不同时更新
  if (!isNaN(parsedPage) && parsedPage !== currentPage) {
    setCurrentPage(parsedPage);
    sessionStorage.setItem("current page", String(parsedPage));
  }
}, [searchParams]);

// 监听currentPage变化，同步到URL、sessionStorage并获取数据
useEffect(() => {
  // 新增历史条目，解决回退异常
  setSearchParams({ p: `${currentPage}` }, { replace: false });
  sessionStorage.setItem("current page", String(currentPage));
  getData();
}, [currentPage, setSearchParams]);

function prevPage() {
  if (currentPage > 1) {
    // 使用函数式更新避免闭包旧值问题
    setCurrentPage(prev => prev - 1);
  }
}

function nextPage() {
  if (currentPage < pagesCount) {
    setCurrentPage(prev => prev + 1);
  }
}

async function calcPagesCount() {
  const api_url = `https://******&per_page=99`;
  const req = await fetch(api_url);
  const products = await req.json();
  setItemsCount(products.length);
  // 修正分页计算：有余数时页数+1
  setPagesCount(Math.ceil(products.length / 9));
}

async function getData() {
  const api_url = `https://******&per_page=9&page=${currentPage}`;
  const req = await fetch(api_url);
  const products = await req.json();
  updateProductData(products);
}

关键修改点 #

1. 初始化逻辑优先从URL读取参数，保证手动修改URL后刷新能生效。
2. setSearchParams添加{ replace: false }，每次分页切换新增历史条目，解决回退异常和Chrome警告。
3. 使用函数式更新setCurrentPage(prev => prev ±1)，避免闭包导致的旧值问题。
4. 分页计算改用Math.ceil，确保最后一页的内容能正常显示。
5. 优化useEffect触发条件，避免循环执行和重复请求。

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