ReactJS中如何根据用户所选分类参数动态构造请求URL

核心实现用原生URLSearchParams处理参数拼接，避免手动拼字符串出现多余符号、转义错误等问题，自动过滤空值参数，支持任意分类项自由组合。

完整实现代码 #

// 替换为你自己申请的Edamam API鉴权参数
const app_id = "你的应用ID";
const app_key = "你的应用Key";

/**
 * 根据用户选中的分类生成合法请求URL
 * @param {Object} selectedCategory 用户选择的分类键值对
 * @returns 拼接完成的API请求URL
 */
function buildRecipeRequestUrl(selectedCategory) {
  // 先写入固定必填的基础参数
  const params = new URLSearchParams({
    type: "public",
    app_id,
    app_key
  });

  // 遍历分类对象，追加所有非空的筛选参数
  Object.entries(selectedCategory).forEach(([paramKey, paramValue]) => {
    // 空字符串、null、undefined这类无效值直接跳过，不拼入URL
    if (typeof paramValue === 'string' && paramValue.trim()) {
      params.append(paramKey, paramValue.trim());
    }
  });

  return `https://api.edamam.com/api/recipes/v2?${params.toString()}`;
}

// 测试示例
const category = { 
  q: "",   
  mealtype: "breakfast",  
  cuisinetype: "American",   
  dishType: "Soup" 
}

const finalUrl = buildRecipeRequestUrl(category);

以上测试示例中因为q（搜索关键词）是空值，最终生成的URL会自动忽略这个空参数，只携带有效筛选参数，输出格式如下：

https://api.edamam.com/api/recipes/v2?type=public&app_id=xxx&app_key=xxx&mealtype=breakfast&cuisinetype=American&dishType=Soup

扩展：支持同分类多选 #

如果需要支持同一个分类下选多个值（比如同时选早餐、午餐两种餐食类型），只需要调整参数遍历逻辑，兼容数组格式的参数值即可：

Object.entries(selectedCategory).forEach(([paramKey, paramValue]) => {
  // 统一把单值转成数组处理，兼容单选、多选两种场景
  const validValues = (Array.isArray(paramValue) ? paramValue : [paramValue])
    .filter(val => typeof val === 'string' && val.trim());
  validValues.forEach(val => params.append(paramKey, val.trim()));
});

调整后如果传入mealtype: ["breakfast", "lunch"]，会自动生成mealtype=breakfast&mealtype=lunch格式的参数，完全符合Edamam API的参数要求。

注意：你原有代码里的基础URL模板q=${query}=末尾多了一个多余的等号，属于手动拼接字符串很容易出现的格式错误，用URLSearchParams处理参数可以完全规避这类问题，同时自动对特殊字符做URL编码，不需要额外处理转义逻辑。

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