React中使用fetch时动态匹配不同query参数键名的实现方法

调用/hotels接口发起GET请求时，查询参数仅会是country_id、city_id、hotel_id三者中的一种，三类参数不会同时传递，且请求发起前无法提前确定当前使用的参数键名。原有代码错误将params.id同时作为查询参数的键和值拼接，无法适配动态参数场景。

原有问题代码：

// 支持的三类请求格式
//hotels?country_id=searched_country_id
//hotels?city_id=searched_city_id
//hotels?hotel_id=searched_hotel_id

useEffect(() => {
  const idCategory = params.id;
  const idName = params.id;

  fetch(
    `http://10.58.5.162:8000/hotels?${idCategory}=${idName}`,
    {
      method: 'GET',
    }
  )
    .then(res => res.json())
    .then(data => {
      setHotelList(data.message);
    });
}, []);

核心逻辑是先匹配到当前正确的参数键值对，再通过原生API生成合法查询串，避免硬编码拼接：

• 先定义参数白名单，固定只允许country_id、city_id、hotel_id三个键透传给接口，避免非法参数导致接口异常
• 根据路由结构匹配当前参数：
  • 如果路由配置为/hotels/:paramType/:paramId这类动态键结构，直接取params.paramType作为查询键，params.paramId作为查询值
  • 如果是三类参数对应三个独立路由路径，直接遍历白名单，找到params中存在有效值的键，就是当前需要使用的查询键
• 用URLSearchParams原生API生成查询字符串，自动处理特殊字符URL编码，避免手动拼接的格式错误
• 增加兜底校验，未匹配到合法参数时直接终止请求，不发送无效接口调用
• 将请求依赖的参数加入useEffect依赖数组，保证路由参数变化时能自动重新拉取数据

修正后可直接使用的代码示例：

useEffect(() => {
  // 合法查询参数白名单
  const ALLOWED_QUERY_KEYS = ['country_id', 'city_id', 'hotel_id'];
  let activeKey = '';
  let activeValue = '';

  // 遍历白名单匹配当前生效的参数
  for (const key of ALLOWED_QUERY_KEYS) {
    if (params[key] !== undefined) {
      activeKey = key;
      activeValue = params[key];
      break;
    }
  }

  // 未匹配到合法参数直接返回，不发请求
  if (!activeKey || !activeValue) return;

  // 生成标准查询串，自动处理编码
  const searchParams = new URLSearchParams({
    [activeKey]: activeValue
  });

  fetch(
    `http://10.58.5.162:8000/hotels?${searchParams.toString()}`,
    { method: 'GET' }
  )
    .then(res => res.json())
    .then(data => {
      setHotelList(data.message);
    });
}, [params, setHotelList]);

注意：如果你的路由是动态键结构（即参数键也存在params的对应字段里），把遍历匹配参数的部分替换成直接取值即可，比如activeKey = params.type; activeValue = params.id，其余逻辑不用改。

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