如何避免React Query useQuery获取数据时首次console.log出现undefined

问题原因分析 #

你的代码存在两个核心问题：

1. fetchPosts函数返回值错误：devices?.map(async (id) => {...})会生成一个Promise数组，但useQuery要求queryFn必须返回单个Promise（或undefined），而非Promise数组。这会导致useQuery无法正确处理异步请求状态，初始阶段data自然为undefined。
2. 未处理React Query的加载状态：useQuery首次执行时，数据处于请求中，data默认就是undefined，这是React Query的正常加载阶段状态，但你的写法没有对这个状态做判断，直接输出就会得到undefined。

你提到保存文件后能正常获取数据，大概率是因为保存后组件热重载，React Query已经缓存了之前请求的结果，直接读取缓存返回了数据。

修正方案 #

步骤1：修复fetchPosts函数 #

将Promise数组用Promise.all包裹，让queryFn返回一个能解析为最终数据的Promise：

const fetchPosts = async () => {
  // 先判断devices是否存在，避免空值调用map
  if (!devices) return [];
  
  // 用Promise.all等待所有异步请求完成
  const fP = await Promise.all(devices.map(async (id) => {
    // 注意：axios请求的response.data已经是接口返回的数据，不需要再取data.data
    const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users`, myHeaders);
    return [data.id];
  }));
  
  return fP;
};

步骤2：正确处理useQuery的状态 #

不要直接在组件顶层console.log(data)，可以通过以下方式处理：

• 方式1：判断data存在后再输出

const { data } = useQuery('post', fetchPosts);

// 只有当data存在时才输出
if (data) {
  console.log(data);
}

• 方式2：用useEffect监听data的变化

import { useEffect } from 'react';

const { data } = useQuery('post', fetchPosts);

useEffect(() => {
  if (data) {
    console.log(data);
  }
}, [data]);

• 方式3：利用useQuery提供的状态标识（比如isLoading）

const { data, isLoading } = useQuery('post', fetchPosts);

if (isLoading) {
  console.log('数据加载中...');
} else if (data) {
  console.log(data);
}

额外优化建议 #

给useQuery添加enabled选项，确保只有当devices存在时才触发请求，避免无效请求：

const { data, isLoading } = useQuery('post', fetchPosts, {
  enabled: !!devices // 只有devices存在时才执行请求
});

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