反应查询，useQuery 返回未定义

Question

各位开发者大家好，

我发现自己处于以下问题中：

我在“util”文件中声明了一个名为 useMembers 的挂钩：

import { useQuery } from 'react-query';
import { customApi } from 'services/api';

export const useMembers = async ({ myId }) => {
  const {
    data: response, error, isError, isLoading,
  } = await useQuery(
    `endpoint-${myId}`,
    async () => {
      const bigMembers = await customApi.get(`one/lovely/endpoint`);
      return {
        ...bigMembers,
        data: {
          ...bigMembers.data,
          members: bigMembers.data,
        },
      };
    },
    {
      cacheTime: 0
    }
  );
  const memberList = response && response.data && response.data.members || []
    console.log(memberList) //return an array with 2 items;
  return {
    members: memberList,
    error,
    isError,
    isLoading,
    status: response?.status,
  };
};
export default useMembers;

在主组件文件中，我调用了我的钩子，但它给出了未定义的：

const {  members, error : errorOnMembers, isLoading: isLoadingOnMembers } = useMembers({ myId });
console.log({members}) //undefined;

我不明白为什么会给出undefined，至少应该是一个空数组

Answer 1

你不能await useQuery。 React hooks 通常从不使用异步函数，因为它们必须在渲染期间同步调用。去掉useMembers中的async和useQuery前面的await。

Answer 2

您可以尝试在您的提取函数中设置一个变量来存储您的数据。像这样：

 const fetchAll = async () => {
    let fetchData;
    await axios.get(`/some/route/over/there`).then((res) => (fetchData = res.data));
    return fetchData;
  };

我在这里使用的是 axios，但这应该适用于任何 http 请求。发生的事情是有一个变量在呈现到页面之前必须检查两次。

反应查询，useQuery 返回未定义

React Query, useQuery returning undefined

reactjs

react-hooks

react-query