React Query中useQueries使用报错，寻求多API请求数据方案

核心错误点 #

1. queryFn不是函数：你直接执行了axiosInstance.get()，这会在初始化时立即发送请求，且useQueries要求queryFn是一个返回Promise的函数，而非Promise本身。
2. queries参数可能为undefined：当stepTypes为undefined时，stepTypes?.map()返回undefined，而useQueries需要queries是一个数组。
3. 组件调用时解构错误：useQueries返回的是一个查询结果数组，而非单个带data属性的对象，不能直接解构{ data: queriesData }。

修复后的代码 #

1. 修正请求函数 #

export function useTableStatusUseQueries({ from, to, stepTypes = [] }) {
  // 确保stepTypes是数组，避免map报错
  const validStepTypes = Array.isArray(stepTypes) ? stepTypes : [];
  
  const results = useQueries({
    queries: validStepTypes.map((type) => ({
      queryKey: [QUERY_KEYS.tableStatus, type, from, to],
      // queryFn改为返回Promise的函数，而非直接调用
      queryFn: () => axiosInstance.get('/reports/table/status', {
        params: {
          from: moment(from).format('YYYY-MM-DD'),
          to: to !== 'Invalid date' ? moment(to).format('YYYY-MM-DD') : moment().format('YYYY-MM-DD'),
          stepType: type,
        },
      }).then(res => res.data), // 可选：直接返回data，简化后续取值
    })),
  });
  return results;
}

2. 修正组件调用方式 #

const queryResults = useTableStatusUseQueries({
  from: moment(dateRange[0]).format('YYYY-MM-DD'),
  to: moment(dateRange[1]).format('YYYY-MM-DD'),
  stepTypes: ['CREATE_DISPOSAL', 'FINAL_DOCUMENT'],
});

// 遍历结果数组获取数据
const queriesData = queryResults.map(result => result.data);
console.log(queriesData);

// 也可以单独处理每个请求的状态
const [createDisposalResult, finalDocumentResult] = queryResults;
console.log(createDisposalResult.data, finalDocumentResult.data);

替代方案：使用useQuery结合Promise.all #

如果不想用useQueries，可以用单个useQuery并行发送多个请求：

export function useTableStatusParallel({ from, to, stepTypes = [] }) {
  return useQuery({
    queryKey: [QUERY_KEYS.tableStatus, stepTypes, from, to],
    queryFn: async () => {
      const promises = stepTypes.map(type => 
        axiosInstance.get('/reports/table/status', {
          params: {
            from: moment(from).format('YYYY-MM-DD'),
            to: to !== 'Invalid date' ? moment(to).format('YYYY-MM-DD') : moment().format('YYYY-MM-DD'),
            stepType: type,
          },
        }).then(res => res.data)
      );
      return Promise.all(promises);
    },
  });
}

// 组件调用
const { data: queriesData, isLoading } = useTableStatusParallel({
  from: moment(dateRange[0]).format('YYYY-MM-DD'),
  to: moment(dateRange[1]).format('YYYY-MM-DD'),
  stepTypes: ['CREATE_DISPOSAL', 'FINAL_DOCUMENT'],
});
console.log(queriesData); // 直接得到两个请求的data数组

关键说明 #

• useQueries返回的是一个数组，每个元素对应一个查询的结果（包含data、isLoading、error等属性），适合需要单独控制每个请求状态的场景。
• 用useQuery结合Promise.all的方式，会将所有请求视为一个整体查询，适合只关心所有请求完成后的数据的场景。

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