如何从导出函数调用钩子，因为它不在函数组件的主体内

Question

当我将导出转换为服务而不是方法时，我无法访问我的服务类方法：

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

  const postWithoutAuth = (url, body) => {
    const request = axios.post(url, body);
    return request.then((response) => response.data);
  };
};

export default HttpService;

我正在尝试访问

postWithoutAuth

方法，如下所示：

import { HttpService } from "../../services/HttpService";
// I think I should use like this:
import HttpService from "../../services/HttpService";

const handleSubmit = (event) => {
    event.preventDefault();
    HttpService.postWithoutAuth("/auth/signup", formValues)
      .then((response) => {})
      .catch((error) => {});
  };

那么，调用这个服务方法是否合适？

Answer 1

不要使

HttpService

成为一个函数，而只是一个包含所有要导出的函数的文件：

export const postWithoutAuth = (url, body) => {
  const request = axios.post(url, body);
  return request.then((response) => response.data);
};
export const anotherOne= (url, body) => {
  //...
};

现在您可以从中导入：

import { postWithoutAuth, anotherOne } from "../../services/HttpService";

更新回复op问题更新：

如果你想使用

postWithoutAuth

函数中的钩子，那么你从使用钩子的父组件传递一个函数给它，因为

hooks 只能在函数组件的内部调用

export const postWithoutAuth = (url, body, functionHook) => {
  const request = axios.post(url, body);
  return request.then((response) => {
     response.data;
     functionHook();
  });
};

来自父组件：

import { useSnackbar } from "notistack";
import { postWithoutAuth } from "../../services/HttpService";

const Parent = () => {

  const functionHook = () => {
    enqueueSnackbar("Failed to Login", {
      variant: "error",
    });
  };
}

<div>
  <button
    onClick={() => {
      postWithoutAuth(url, body, functionHook);
    }}
  >
    Click me
  </button>
</div>;

您可以在父组件中创建多个类似于

functionHook

的函数来显示不同的警报，您还可以将多个函数传递给

postWithoutAuth

函数，并且基于

responde.data

您知道要执行什么函数

Answer 2

无法访问在另一个未以某种方式返回的函数内声明的函数。

HttpService

看起来根本不应该是一个函数。相反，您可以直接导出

postWithoutAuth

函数。

export const postWithoutAuth = (url, body) => {
    const request = axios.post(url, body);
    return request.then((response) => response.data);
};

然后，你可以像这样在另一个文件中使用它：

import { postWithoutAuth } from "../../services/HttpService";