如何将数组动态映射为同键重复格式的URL查询参数

实现方案 #

方法1：使用axios内置params功能（推荐） #

不需要手动拼接查询参数，axios原生支持通过配置自动生成符合要求的查询格式：

try {
  const { data } = fetchContext.authAxios.get(
    `/api/csv/pet/${id}/`,
    {
      params: {
        columns: values.columns // 直接传入列名数组即可
      },
      // 该配置会自动把数组类型的参数转为重复key的格式
      paramsSerializer: {
        indexes: null
      }
    }
  );
}

该方案会自动处理参数编码，不需要自己处理特殊字符，适配1-4个不等的列名场景。

方法2：手动拼接查询参数 #

如果你需要自己控制拼接逻辑，可以遍历数组生成参数片段：

// 生成columns参数片段
const columnQuery = values.columns 
  ? values.columns.map(item => `columns=${encodeURIComponent(item)}`).join('&')
  : ''
// 拼接完整请求地址
const requestUrl = `/api/csv/pet/${id}/${columnQuery ? `?${columnQuery}` : ''}`

try {
  const { data } = fetchContext.authAxios.get(requestUrl, values);
}

相关包说明 #

不需要引入React专属的工具包实现该功能，上述两种原生方案即可满足需求。如果使用的是v0.25.0以下的旧版本axios，也可以引入通用的参数序列化工具库处理，不需要React相关依赖。

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