useQuery 没有 return 数据并且函数是 returned

Question

我正在尝试使用 react-query(useQuery) 在我的应用程序中获取聊天列表。我的 API 调用在不同的组件中，我正在使用 Axios 获取数据。但是组件返回的是函数本身而不是数据。哪一部分是错误的？

import { useQuery } from "react-query";
import axios from "axios";

const getContacts = async () => {
  const headers = { Authorization: localStorage.getItem("token") };
  const options = {
    method: "GET",
    url: "http://127.0.0.1:8000/chat/mine/",
    headers: headers,
  };
  const { data } = await axios.request(options);

  return data;
};
function GetUserDataUseQuery() {
  return useQuery("getContacts", getContacts);
}
export default GetUserDataUseQuery;

function getUserData() {
  const data = GetUserDataUseQuery;

  return (dispatch) => {
    dispatch({
      type: GET_CONTACTS,
      payload: [],
    });
  };
}

Answer 1

我建议你稍微重构一下你的代码来解决你的一些问题：

const getContacts = async () => { /*...*/ }
const useGetContacts = () {
  return useQuery('getContacts', getContacts)
}

// `useGetContacts` is a hook, so it should be called inside of a 
// component or another hook - you *cannot* call a hook inside of a 
// simple function, which is what you're attempting to do inside `getUserData`

function MyComponent() {
  const contacts = useGetContacts();
  // ...
}

或者，如果您确实想像使用函数一样使用 getContacts，那么就不要将它包装在 useQuery 中，因为这会将它变成一个钩子。

async function getUserData() {
  const data = await getContacts()
  // ...
}

useQuery 没有 return 数据并且函数是 returned

useQuery doesn't return the data and the function is returned

javascript

api

reactjs

axios

react-query