反应查询，使用查询返回未定义答案

【问题标题】：React Query, useQuery returning undefined反应查询，使用查询返回未定义
【发布时间】：2021-06-22 04:12:52
【问题描述】：

您好强大的开发人员，

我发现自己陷入了以下问题：

我在“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，至少应该是一个空数组

【问题讨论】：

能否尝试返回响应并检查response.data.members上的数据是否正确？
你为什么是awaiting useQuery？它不返回 Promise。
@trixn 。谢谢！它解决了问题，将其作为官方答案提供，以便我接受。

标签： reactjs react-hooks react-query

【解决方案1】：

你不能awaituseQuery。 React 钩子通常不是异步函数，因为它们必须在渲染期间同步调用。删除useMembers 中的async 和useQuery 前面的await。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：