Javascript React js如何从组件外部发布axios

我正在try 编写一个函数来处理从服务器获取数据的过程.此函数获取要联系的url，并使用令牌对服务器进行self 授权.这个函数相当长.因此，我希望react应用程序中的每个其他页面都使用所需的url调用此函数，然后让此函数处理其他所有内容.因此，我需要每个页面等待这个函数，但无论我try 什么，我都会得到"Error:Invalid hook call".

这是一个处理发送到服务器的post请求的函数:

import React, { useEffect, useState, createRef, lazy, useContext } from "react";
import { UserContext } from "./UserContext";

import jwt_decode from "jwt-decode";

import axios from "axios";

export async function getProtectedAsset(url) {
  const { user, setUser } = useContext(UserContext);

  //If we do not have a token
  if (user["userID"] == -1) {
    return "Error: No token";
  } else {
    try {
      //Get user data
      const token = {
        accessToken: user["accessToken"],
        email: user["email"],
        userID: user["userID"],
      };

      //Check if accessToken is about to expire (60s mairgain)
      if (
        Date.now() >=
        jwt_decode(token["accessToken"])["exp"] * 1000 - 60000
      ) {
        //Get new token
        const res = await axios
          .post("http://127.0.0.1:5002/refreshtoken", {
            token: user["refreshToken"],
          })
          .then((res) => {
            setUser({
              userID: user["userID"],
              email: user["email"],
              accessToken: res.data["accessToken"],
              refreshToken: user["refreshToken"],
              accountType: user["accountType"],
            });
          })
          .catch((err) => {
            console.error(err);
          });
      }
      //Our token is fresh
      else {
        const res = await axios
          .post(url, token)
          .then((promise) => {
            return promise.data;
          })
          .catch((err) => {
            console.error(err);
          });
      }
    } catch (error) {
      console.log(error);
      throw err;
    }
  }
}

这是我试图从中调用此函数的页面/组件:

import React, { useState, useContext, useEffect, useCallback } from "react";

import { UserContext } from "../../UserContext";

import { getProtectedAsset } from "../../getProtectedAsset";

const Settings = () => {
  const { user, setUser } = useContext(UserContext);

  useEffect(async () => {
    try {
      let data = await getProtectedAsset("http://127.0.0.1:5002/mypage");
      console.log(data);
    } catch (error) {
      console.error(error.message);
    }
  }, []);


  return <></>;
};

export default Settings;

这给了我一个错误:

无效的钩子调用.钩子只能在物体内部被称为钩子

1. React和渲染器的版本可能不匹配(例如React DOM)
2. 你可能违反了钩子的规则
3. 在同一个应用程序中，您可能有多个React副本.有关如何调试的提示，请参阅https://reactjs.org/link/invalid-hook-call

我try 了我能想象的一切，阅读了不同的教程/指南/文档，但仍然无法解决问题.通常是因为缺乏知识，或是一些思维错误，但我真的需要帮助！

谢谢你的帮助