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

【问题标题】：React js how to axios post from outside of componentReact js如何从组件外部发布axios
【发布时间】：2022-06-20 18:59:27
【问题描述】：

我正在尝试编写一个函数来处理从服务器获取数据和从服务器获取数据。此函数使用 url 进行联系并使用令牌向服务器授权自己。这个函数很长。因此，我希望我的 react 应用程序中的所有其他页面都使用所需的 url 调用此函数，然后让此函数处理其他所有内容。因此，我需要每个页面都等待此功能，但无论我尝试什么，我都会收到“错误：无效的挂钩调用”。

这是处理对服务器的 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;

这给了我错误：

无效的挂钩调用。 Hooks 只能在 a 的主体内部调用功能组件。这可能发生在以下情况之一原因：

您的 React 和渲染器版本可能不匹配（例如 React DOM）

您可能违反了 Hooks 规则

您可能在同一个应用程序中拥有多个 React 副本有关如何调试的提示，请参阅 https://reactjs.org/link/invalid-hook-call 并解决此问题。

我已经尝试了所有可以想象的方法并阅读了不同的教程/指南/文档，但仍然无法找出问题所在。通常是缺乏知识，或者一些思维错误，但我真的需要帮助！

感谢您的帮助

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

这是因为您在 getProtectedAsset() 函数中使用了 useContext() 钩子。不要在 getProtectedAsset 中使用 useContext，而是尝试将 user 作为参数传递给函数，例如 url。

let data = await getProtectedAsset(url, user);

【讨论】：