React JS中如何动态设置与获取对象的多查询参数

问题场景 #

现有数据对象：

const data = {
  language_in: ["EN"],
  resource_type_in: ["VIDEOS"]
};

需要将其转换为如下格式的URL查询参数：
localhost:3000/resource/?language_in[]=EN&resource_type_in[]=VIDEOS

要求：筛选器的值支持多个，且筛选器更新时同步变更URL参数。

尝试过的代码：

useEffect(() => {
  let params = {};
  new URLSearchParams(data)
    .forEach((value, key) => { params = { ...params, [key]: value }; });
  console.log('>>> params', params);
  history.push({ search: params.toString() });
}, [history, data]);

问题分析 #

原代码存在两个核心问题：

1. URLSearchParams直接处理对象中的数组时，会自动扁平化数组为单个字符串，不会生成带[]的键名
2. 最后调用普通对象的toString()方法，得到的结果是[object Object]，并非有效的URL查询字符串

解决方案 #

手动遍历参数对象，对数组类型的值循环添加带[]的键名，使用URLSearchParams的append方法生成正确格式的查询字符串：

useEffect(() => {
  const params = new URLSearchParams();
  
  // 遍历所有筛选器键值对
  Object.entries(data).forEach(([key, values]) => {
    // 统一处理单值和多值，转为数组格式
    const valueList = Array.isArray(values) ? values : [values];
    
    // 为每个值添加带[]的参数名
    valueList.forEach(value => {
      params.append(`${key}[]`, value);
    });
  });
  
  // 更新路由的查询参数
  history.push({ search: params.toString() });
}, [history, data]);

效果验证 #

当数据对象包含多值时：

const data = {
  language_in: ["EN", "FR"],
  resource_type_in: ["VIDEOS", "ARTICLES"]
};

会生成如下查询字符串：
language_in[]=EN&language_in[]=FR&resource_type_in[]=VIDEOS&resource_type_in[]=ARTICLES
完全符合多值筛选的URL参数格式要求。

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