如何在非函数组件的API文件中使用自定义Hook调用私有接口？

你遇到的错误是因为违反了React Hook的规则：自定义Hook只能在函数组件或者其他自定义Hook的顶层作用域中调用，不能在普通的异步函数（比如你的GetPackagesinfo这类API函数）里使用。下面是两种可行的解决方式：

方案一：让API函数接收axios实例作为参数 #

修改API文件，把axiosPrivate作为参数传入每个API函数，这样就不需要在API文件里调用Hook了：

// api 文件
export const GetPackagesinfo = async (axiosPrivate) => {
  const res = await axiosPrivate.get("/mk_get_packages_information");
  return res.data;
};

export const GetAccountInfo = async (axiosPrivate) => {
  const res = await axiosPrivate.get("/mk_company_admin_user_account_information");
  return res.data;
};

export const DeleteAccount = async (axiosPrivate) => {
  const res = await axiosPrivate.delete("/mk_company_admin_user_delete_account_information");
  return res.data;
};

之后在函数组件或自定义Hook中，先通过useAxiosPrivate获取实例，再传给API函数配合React Query使用：

import { useQuery, useMutation } from "@tanstack/react-query";
import useAxiosPrivate from "../hooks/useAxiosPrivate";
import { GetPackagesinfo, GetAccountInfo, DeleteAccount } from "../api/你的文件名";

const YourComponent = () => {
  const axiosPrivate = useAxiosPrivate();

  // 查询套餐信息
  const { data: packages } = useQuery({
    queryKey: ["packages"],
    queryFn: () => GetPackagesinfo(axiosPrivate),
  });

  // 查询账户信息
  const { data: account } = useQuery({
    queryKey: ["account"],
    queryFn: () => GetAccountInfo(axiosPrivate),
  });

  // 删除账户的Mutation
  const deleteAccountMutation = useMutation({
    mutationFn: () => DeleteAccount(axiosPrivate),
    // 可添加onSuccess、onError等回调
  });

  // 组件其他逻辑...
};

方案二：将API调用封装为自定义Hook（集成React Query） #

直接把API调用和React Query、useAxiosPrivate封装成新的自定义Hook，这样既符合Hook规则，又能直接在组件中使用：

// hooks/usePrivateApi.js
import { useQuery, useMutation } from "@tanstack/react-query";
import useAxiosPrivate from "./useAxiosPrivate";

// 查询套餐信息的Hook
export const useGetPackagesInfo = () => {
  const axiosPrivate = useAxiosPrivate();
  return useQuery({
    queryKey: ["packages"],
    queryFn: async () => {
      const res = await axiosPrivate.get("/mk_get_packages_information");
      return res.data;
    },
  });
};

// 查询账户信息的Hook
export const useGetAccountInfo = () => {
  const axiosPrivate = useAxiosPrivate();
  return useQuery({
    queryKey: ["account"],
    queryFn: async () => {
      const res = await axiosPrivate.get("/mk_company_admin_user_account_information");
      return res.data;
    },
  });
};

// 删除账户的Hook
export const useDeleteAccount = () => {
  const axiosPrivate = useAxiosPrivate();
  return useMutation({
    mutationFn: async () => {
      const res = await axiosPrivate.delete("/mk_company_admin_user_delete_account_information");
      return res.data;
    },
  });
};

在组件中直接使用这些Hook即可：

import { useGetPackagesInfo, useGetAccountInfo, useDeleteAccount } from "../hooks/usePrivateApi";

const YourComponent = () => {
  const { data: packages } = useGetPackagesInfo();
  const { data: account } = useGetAccountInfo();
  const deleteAccountMutation = useDeleteAccount();

  // 组件其他逻辑...
};

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