reactjs - 反应查询，使用查询返回未定义

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;

我不知道为什么它给出未定义，至少应该是一个空数组

标签： reactjsreact-hooksreact-query

Answer 1

你不能await useQuery。React 钩子通常不是异步函数，因为它们必须在渲染期间同步调用。去掉asyncfromuseMembers和await前面的useQuery。