React Query中传递数组参数如何适配API的多值参数格式？

你的代码中Axios默认将数组参数jobStatus: ['NEW', 'IN']序列化为jobStatus[]=NEW&jobStatus[]=IN，但API要求重复键名的格式jobStatus=NEW&jobStatus=IN，可以通过以下方式修改：

方法一：配置Axios参数序列化规则 #

Axios内部依赖qs库处理参数序列化，你可以在请求中指定数组的序列化格式为repeat：

export function useGetEmployeesInfiniteScroll() {
  return useInfiniteQuery(
    [QUERY_KEYS.employees],
    async ({ pageParam = 0 }) => {
      const { data } = await axiosInstance.get(v1 + employees + filter, {
        params: {
          jobStatus: ['NEW', 'IN'],
          page: pageParam,
          size: 20,
        },
        // 添加序列化配置
        paramsSerializer: {
          serialize: (params) => {
            return qs.stringify(params, { arrayFormat: 'repeat' });
          }
        }
      });
      return data;
    },
    {
      getNextPageParam: (lastPage) => {
        const nextPage = lastPage.number + 1;
        return nextPage < lastPage.totalPages ? nextPage : undefined;
      },
    },
  );
}

注：Axios已内置qs，无需额外安装。

方法二：手动构造查询参数（备选） #

若不想依赖qs，可以手动展开数组为重复键值对：

export function useGetEmployeesInfiniteScroll() {
  return useInfiniteQuery(
    [QUERY_KEYS.employees],
    async ({ pageParam = 0 }) => {
      const params = new URLSearchParams();
      params.append('page', pageParam.toString());
      params.append('size', '20');
      ['NEW', 'IN'].forEach(status => params.append('jobStatus', status));
      
      const { data } = await axiosInstance.get(v1 + employees + filter, { params });
      return data;
    },
    {
      getNextPageParam: (lastPage) => {
        const nextPage = lastPage.number + 1;
        return nextPage < lastPage.totalPages ? nextPage : undefined;
      },
    },
  );
}

推荐使用方法一，更简洁且符合Axios的使用习惯，便于统一管理参数格式。

内容的提问来源于stack exchange，提问作者Rahil Əliyev