导出函数调用Hook及HttpService方法访问问题咨询

一、无法访问服务方法的原因及修复 #

你当前的HttpService是一个函数，但没有返回包含postWithoutAuth方法的对象，而且直接通过HttpService.postWithoutAuth调用是错误的——这是把它当成静态方法调用，但它是函数内部定义的方法，必须先执行函数才能获取。另外，函数内用到了useSnackbar，根据React规则，它只能在组件或自定义Hook中调用，所以需要把HttpService改成符合规范的自定义Hook（命名需以use开头）。

修改后的服务代码： #

import { useSnackbar } from 'notistack';
import axios from 'axios';

const useHttpService = () => {
  const AUTH_TOKEN = localStorage.getItem("tokenKey");
  const { enqueueSnackbar } = useSnackbar();

  const postWithoutAuth = (url, body) => {
    return axios.post(url, body)
      .then((response) => response.data)
      .catch(error => {
        enqueueSnackbar('请求失败', { variant: 'error' });
        throw error; // 抛出错误让调用方处理
      });
  };

  // 返回需要暴露的方法
  return {
    postWithoutAuth
  };
};

export default useHttpService;

正确调用方式（React函数组件内）： #

import useHttpService from "../../services/HttpService";

const YourComponent = () => {
  // 必须在组件顶层调用自定义Hook
  const { postWithoutAuth } = useHttpService();
  const [formValues, setFormValues] = useState({});

  const handleSubmit = (event) => {
    event.preventDefault();
    postWithoutAuth("/auth/signup", formValues)
      .then((response) => {
        // 处理成功逻辑
      })
      .catch((error) => {
        // 处理错误逻辑
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单内容 */}
    </form>
  );
};

export default YourComponent;

二、非组件主体内调用Hook的解决方案 #

React Hook的核心规则：Hook只能在React函数组件的顶层，或自定义Hook的顶层调用，不能在普通函数、循环、条件判断或非组件的导出函数里调用。

如果需要在非组件的普通函数中使用Hook相关功能，有两种可行方案：

• 传递Hook值给普通函数：在组件内调用Hook拿到值，再将值作为参数传入普通函数
• 转为自定义Hook：如果函数本身依赖Hook，将其改成以use开头的自定义Hook，仅在组件或其他Hook内调用

三、你原有调用方式的问题 #

1. 直接用HttpService.postWithoutAuth调用，既没有执行HttpService函数，原函数也未返回任何方法，自然无法访问
2. 原HttpService内使用了useSnackbar，若在非组件环境执行该函数，会违反Hook规则，直接触发报错

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