React Query：如何获取动态并行查询的单个请求状态？

你的问题核心是自定义Hook里过滤掉了未完成的查询，导致组件只能拿到已成功返回数据的请求，自然看不到单个请求的加载状态。

问题原因分析 #

在你的useGetUsersQueries Hook中，这段代码：

const data = queries.filter((query) => query.data)

只保留了包含data的查询对象——也就是已经成功完成的请求。还在加载中或请求失败的查询会被过滤掉，所以组件里遍历usersData时，每个项都是已成功的请求，isLoading自然永远为false，isSuccess永远为true。

解决方案：保留所有查询的完整状态 #

修改自定义Hook，返回所有查询的完整状态（包括加载、成功、错误状态），而不是只过滤有数据的项：

const useGetUsersQueries = (users) => {
  const queries = useQueries({
    queries: users?.map((user) => ({
      queryKey: ['get-users-query', user.id],
      queryFn: async () => {
        const response = await getUsers(user.id);
        return response.data;
      },
      enabled: !!user
    })) || [] // 处理users为undefined的边界情况
  });

  // 保留整体状态供全局使用
  const isLoading = queries.some(query => query.isLoading);
  const isSuccess = queries.every(query => query.isSuccess);
  const isError = queries.some(query => query.isError);

  // 构造包含每个请求完整状态的数组
  const userQueryStates = queries.map(query => ({
    data: query.data,
    isLoading: query.isLoading,
    isSuccess: query.isSuccess,
    isError: query.isError,
    error: query.error
  }));

  return [userQueryStates, { isLoading, isSuccess, isError }];
};

组件中使用单个请求状态 #

修改组件代码，遍历包含完整状态的数组，就能单独判断每个请求的状态：

const [userQueryStates, { isLoading: overallLoading }] = useGetUsersQueries(users);

{userQueryStates.map((queryState, index) => {
  // 根据单个请求状态渲染对应组件
  if (queryState.isLoading) {
    return <Loading key={index} />;
  }
  if (queryState.isError) {
    return <div key={index}>加载失败：{queryState.error?.message}</div>;
  }
  if (queryState.isSuccess && queryState.data) {
    return <Component data={queryState.data} key={index} />;
  }
  return null;
})}

结论 #

完全可以获取每个用户请求的加载状态，只要你不过滤掉未完成的查询对象，保留每个请求的完整状态即可。同时也可以保留整体状态，用于全局的加载提示（比如页面顶部的加载条）。

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