使用React Query获取数据遇问题：sampleData始终返回undefined

问题分析 #

你的代码存在三个核心错误，导致sampleData始终为undefined：

• SampleApi 导出错误：直接执行axios.get并导出 Promise 对象，而非可调用的函数。这会导致模块加载时就触发请求，且无法在 React Query 的queryFn中正确复用。
• queryFn 逻辑错误：用fetch包裹SampleApi，但fetch接收的是 URL 字符串，而SampleApi已经是 axios 返回的 Promise，导致请求逻辑完全错误。
• 自定义 Hook 调用错误：调用useSampleGet时未加括号，自定义 Hook 必须作为函数调用才能返回数据。

修复后的代码 #

1. 修正 SampleApi.js #

改为导出函数，让 React Query 可按需调用：

import axios from "axios";

const BASE_URL = "sample";
const TOKEN = "sample";

const SampleApi = () => axios.get(BASE_URL, {
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${TOKEN}`,
  },
});

export default SampleApi;

2. 修正 useSample.js #

直接在queryFn中调用 SampleApi 函数，同时添加必填的queryKey（React Query 用于缓存管理）：

import SampleApi from "../api/SampleApi";
import { useQuery } from "react-query";

export const useSampleGet = () => {
  const { isLoading, error, data } = useQuery({
    queryKey: ["sampleData"],
    queryFn: SampleApi,
  });  

  return { isLoading, error, data };
};

3. 修正调用代码 #

正确调用自定义 Hook（添加括号）：

const { data: sampleData } = useSampleGet();
console.log(sampleData);

额外优化建议 #

• 若只需接口返回的业务数据，可在 SampleApi 中直接返回res.data，简化后续处理：

const SampleApi = () => axios.get(BASE_URL, {
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${TOKEN}`,
  },
}).then(res => res.data);

• 结合isLoading和error状态处理加载/异常场景，避免打印无意义的undefined：

const { isLoading, error, data: sampleData } = useSampleGet();

if (isLoading) return <div>加载中...</div>;
if (error) return <div>请求出错：{error.message}</div>;

console.log(sampleData);
return <div>{JSON.stringify(sampleData)}</div>;

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