React分页刷新时保持当前页面激活的实现方法

核心思路 #

每次切换页面时把当前页码存入LocalStorage，组件初始化时从LocalStorage读取页码（无数据则默认第一页）；同时搜索关键词变化时自动重置页码到第一页，保证搜索新内容时的分页逻辑合理。

代码修改步骤 #

1. 初始化页码时读取LocalStorage
   将page的初始值改为从LocalStorage读取，避免刷新后丢失当前页码：

const [page, setPage] = useState(() => {
  // 从localStorage取数据，不存在则默认1，转数字避免字符串类型问题
  return Number(localStorage.getItem('currentPage')) || 1;
});

2. 切换页面时保存页码到LocalStorage
   修改handlePageClick函数，更新页码的同时将新页码存入LocalStorage：

const handlePageClick = (event) => {
  const newPage = event.selected + 1;
  const newOffset = (event.selected * 8) % playerData.length;
  setPage(newPage);
  // 保存当前页到localStorage
  localStorage.setItem('currentPage', newPage);
};

3. 搜索关键词变化时重置页码
   当query变化时，自动回到第一页并更新LocalStorage，保证搜索新内容时从第一页开始：

useEffect(() => {
  // 搜索关键词改变，重置页码到1
  setPage(1);
  localStorage.setItem('currentPage', '1');
}, [query]);

完整修改后的关键代码片段 #

const [playerData, setPlayerData] = useState([]);
const [query, setQuery] = useState("");
const [isLoading, setIsLoading] = useState(false);
// 从localStorage初始化页码
const [page, setPage] = useState(() => Number(localStorage.getItem('currentPage')) || 1);

const [currentPlayers, setCurrentPlayers] = useState(null);
const [pageCount, setPageCount] = useState(0);
const [playersOffset, setPlayersOffset] = useState(0);

// 监听query变化，重置页码
useEffect(() => {
  setPage(1);
  localStorage.setItem('currentPage', '1');
}, [query]);

useEffect(() => {
  setIsLoading(true);
  console.log("dummy");
  axios
    .get(
      // 这里替换为你的API地址，记得带上page和query参数
      // 示例：`/api/players?page=${page}&query=${query}`
    )
    .then((response) => {
      // 你的数据处理逻辑，比如：
      // setPlayerData(response.data.players);
      // setPageCount(Math.ceil(response.data.total / 8));
    })
    .catch((err) => {
      // 错误处理逻辑
    })
    .finally(() => {
      setIsLoading(false);
    });
},[page, query]);

useEffect(() => {
  const endOffset = playersOffset + 8;
  // 前端分页时需要截取对应数据，原代码直接setPlayerData可能不符合分页逻辑
  setCurrentPlayers(playerData.slice(playersOffset, endOffset));
}, [playerData, playersOffset]);

const handlePageClick = (event) => {
  const newPage = event.selected + 1;
  const newOffset = (event.selected * 8) % playerData.length;
  console.log("yeeeeħ", event);
  setPage(newPage);
  localStorage.setItem('currentPage', newPage);
};

注意事项 #

• 如果是后端分页，确保API请求带上page参数，这样切换页码时能获取对应页的数据
• 如果是前端分页（一次性获取所有数据），可以考虑直接用page计算playersOffset（比如playersOffset = (page - 1) * 8），减少冗余状态维护
• LocalStorage存储的是字符串，读取时务必转成数字，避免类型错误导致的逻辑问题

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