如何使用React Query useQueries结合.map()获取多ID数组API数据

我有一个包含多个ID的数组：

const ids= [1001,1002,1003,1004,1005,
2001,2002,2003,2004,2005,
3001,3002,3003,3004,3005,
4001,4002,4003,4004,4005,
5001,5002,5003,5004,5005,
6001,6002,6003,6004,6005,
7001,7002,7003,7004,7005,
8001,8002,8003,8004,8005]

希望通过.map()结合React Query的useQueries钩子，调用每个ID对应的API接口（https://www.roads.com/road/api/roadControl/${id}）获取数据。但当前代码返回的是Promise数组而非实际数据，单独调用单个ID的API能正常获取数据，相关代码如下：

const fetchDetails = () => {
    const requestArray = (ids?.map(async(id) => {
       return await axios.get(`https://www.roads.com/road/api/roadControl/${id}`, myHeaders)
       .then((res) => {
        return res.data;
    })
    }))
    return requestArray;
  }
  const finalData = useQueries({
    queries: [
      { queryKey: ['post', 1], queryFn: fetchDetails},
    ]
  })

  console.log(finalData);

你对useQueries的用法存在误解：它需要接收一个查询配置对象数组，每个对象对应一个独立的查询任务，而非将所有请求打包成一个查询函数。

正确实现步骤： #

1. 定义单个ID的请求函数：

// 单独封装单个ID的请求逻辑，职责单一
const fetchRoadControl = async (id) => {
  const response = await axios.get(
    `https://www.roads.com/road/api/roadControl/${id}`,
    myHeaders
  );
  return response.data;
};

2. 基于ID数组生成查询配置数组，传入useQueries：

// 为每个ID生成独立的查询配置
const queryConfigs = ids.map(id => ({
  queryKey: ['roadControl', id], // 每个查询的唯一标识，必须包含ID以区分不同请求
  queryFn: () => fetchRoadControl(id),
  // 可选：添加自定义配置，比如enabled控制是否启用查询、cacheTime设置缓存时长等
}));

// 传入useQueries获取结果
const finalData = useQueries({ queries: queryConfigs });

原代码问题分析： #

• 你将所有请求打包进fetchDetails函数，该函数返回的是Promise数组，但useQueries的queryFn要求是单个请求的异步函数，而非批量请求的Promise集合。
• 原queryKey仅设置为['post', 1]，无法区分不同ID的查询，会导致缓存混乱，也不符合React Query的缓存设计逻辑。

结果数据的使用方式： #

finalData是一个数组，每个元素对应一个查询的状态对象，包含data（实际返回数据）、isLoading（加载状态）、error（错误信息）等字段：

// 遍历处理每个查询结果
finalData.forEach((result, index) => {
  const targetId = ids[index];
  if (result.isLoading) {
    console.log(`ID ${targetId} 正在加载`);
  } else if (result.error) {
    console.log(`ID ${targetId} 请求失败:`, result.error.message);
  } else {
    console.log(`ID ${targetId} 数据:`, result.data);
  }
});

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