React Query中useQuery返回undefined但网络请求正常的问题排查

问题出在UserApi.js的getUser函数里——你没有返回axios请求的Promise，React Query无法拿到异步请求的结果，所以user一直是undefined。

修复后的UserApi.js #

import axios from "axios";

const api = axios.create({  
  baseURL: "https://jsonplaceholder.typicode.com/",
});

export const getUser = (id) => {
  // 这里要return整个Promise链
  return api.get(`/users/${id}`).then((response) => response.data);
};

为什么会这样？ #

原代码里的api.get(...)确实发起了请求，但函数没有返回任何值，默认返回undefined。React Query的useQuery期望第二个参数是一个返回Promise的函数，它会等待Promise resolve后把结果赋值给data。加上return后，useQuery就能正确接收请求返回的数据了。

你也可以用async/await简化代码，可读性更好：

export const getUser = async (id) => {
  const response = await api.get(`/users/${id}`);
  return response.data;
};

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