React多页面搜索栏设置及分页刷新问题排查求助

问题1：无法跨页搜索 #

问题原因 #

1. 当前仅请求单页数据，playerData只存储当前页的玩家信息，搜索时只能在这部分数据里查找
2. 搜索关键词query未传递给后端，后端无法返回全量匹配的分页结果
3. 原API URL拼接存在错误：?page=${page}应该改为&page=${page}，否则会覆盖前面的expand参数

解决方案 #

优先采用后端支持搜索参数的方案（4550页数据前端全量缓存性能极差，不推荐）：

• 修改API请求，将搜索关键词作为参数传给后端，由后端筛选后返回分页数据
• 若后端暂时无法支持，可临时在当前页数据中做过滤（仅临时方案）

代码修改点

1. 修正API请求URL，添加搜索参数：

axios.get(
  `http://192.168.18.8/goc-backend/api/web/index.php/v1/player/?expand=specialitiesInfo,relations,specialitiesInfo.battingStyle,specialitiesInfo.fieldingStyle,specialitiesInfo.bowlingStyle,teams.team,cricketInfo,playersNews.news,playersGallery.image,playersVideos.video,playersComments,sports&page=${page}&search=${encodeURIComponent(query)}`
)

2. 添加前端临时过滤逻辑（若后端未处理搜索）：

// 在return前定义过滤后的数据
const filteredPlayers = query 
  ? playerData.filter(player => 
      player.full_name.toLowerCase().includes(query.toLowerCase()) ||
      player.country.toLowerCase().includes(query.toLowerCase())
    )
  : playerData;

// 渲染时用filteredPlayers替代playerData
{filteredPlayers.map((player) => {
  // ...原map逻辑不变
})}

问题2：刷新页面回到第一页 #

问题原因 #

页面刷新后React组件状态重置，page的初始值为1，导致回到第一页。需要将页码状态同步到URL的查询参数中，刷新时从URL读取页码。

解决方案 #

使用路由钩子同步URL参数（需确保项目已集成react-router）：

// 引入路由钩子
import { useLocation, useNavigate } from 'react-router-dom';

const Players = () => {
  const location = useLocation();
  const navigate = useNavigate();

  // 从URL获取初始页码，默认1
  const [page, setPage] = useState(() => {
    const params = new URLSearchParams(location.search);
    return parseInt(params.get('page')) || 1;
  });

  // 页码变化时更新URL
  useEffect(() => {
    const params = new URLSearchParams(location.search);
    params.set('page', page);
    navigate({ search: params.toString() }, { replace: true });
  }, [page, navigate, location.search]);

  // ...其余代码不变
};

若未使用react-router，可直接操作window.location：

const Players = () => {
  // 从URL获取初始页码
  const [page, setPage] = useState(() => {
    const params = new URLSearchParams(window.location.search);
    return parseInt(params.get('page')) || 1;
  });

  // 页码变化时更新URL
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    params.set('page', page);
    window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
  }, [page]);

  // ...其余代码不变
};

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