如何从普通Javascript文件中的React Functional Component访问函数？

问候Javascript开发人员。我现在陷入了一个复杂的境地，需要在一个普通的js文件中访问一个函数组件内部的函数

好的，下面是我要做的：这是我的

Authorizer.js

功能组件

import React, { createContext, useState, useEffect, useContext } from "react";
import SplashScreen from "react-native-splash-screen";
import { useStore } from "../config/Store";
import { useDatabase } from "../config/Persistence";
import { getSessionCredentials } from "../config/Persistence";
import NavigationDrawer from "./NavigationDrawer";
import AuthStacks from "./AuthStacks";

const AuthContext = createContext();
export const useAuthorization = () => useContext(AuthContext);

export function Authorizer() {
  //TODO check whether user is already signed in or not.
  const realm = useDatabase();
  const { state, dispatch } = useStore();
  const [isAuthorized, setAuthorization] = useState(false);

  useEffect(() => {
    VerifyCredentials();
  }, []);

  async function VerifyCredentials() {
    //TODO Check from Async Storage?
    var session = await getSessionCredentials();
    console.log("saved session", session);
    if (session) {
      await DispatchShopData();
      await setAuthorization(true);
    } else {
      await setAuthorization(false);
    }
    sleep(1000).then(() => {
      SplashScreen.hide();
    });
  }

  async function DispatchShopData() {
    try {
      let shop = await realm.objects("Shop");
      await dispatch({ type: "UPDATE_SHOP_DETAILS", payload: shop[0] });
    } catch (error) {
      console.log("failed to retrieve shop object", error);
    }
  }

  function sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

  return (
    <AuthContext.Provider value={{ setAuthorization }}>
      {isAuthorized ? <NavigationDrawer /> : <AuthStacks />}
    </AuthContext.Provider>
  );
}

在我的

ApiService.js

文件中，我设置了一个响应拦截器，其任务是捕获默认的auth令牌过期响应并立即注销用户，并将其带到登录屏幕。这就是我的问题所在

在正常情况下，我需要从一个组件中访问另一个组件中的函数，我可以使用

CreateContext（）

和

useContent（）

挂钩进行管理。但是，如何访问我的

ApiService.js

文件中Authorizer.js组件中的useState函数

setAuthorization

，作为一个普通的js函数

---

我只需要从我的响应拦截器块调用

setAuthorization（false）

，就可以让用户返回登录屏幕。问题是idk如何访问该状态设置器函数。因此，任何帮助都将不胜感激。

当您使用redux时，为什么要在组件中定义和管理状态？您可以在redux存储中存储isAuthorized并在任何地方更改它。

import Axios from "axios";
import { getAuthToken } from "../config/Persistence";
import { LogoutUser } from "../config/Persistence";
import { Alert } from "react-native";

const BASE_URL = "#########################";

/** Defined my Api Endpoints Here */

let service = Axios.create({
  baseURL: BASE_URL,
  timeout: 10000,
});

service.interceptors.response.use((response) => {
  console.log("[API] response intercepted data", response.data.message);
  if (!response.data.status && response.data.tokenExpired) {
    //Auth token has Expired. Show user Alert for Session Expired & redirect to login screen.
    Alert.alert(
      "Your Session has Expired!",
      "Don't worry though. You just need to login again & you're set.",
      [
        {
          text: "Continue",
          style: "default",
          onPress: () => {
            LogoutUser()
              .then((success) => {
                if (success) {
                  //TODO Find a way to Access this function from Authorizer.js Component.
                  //setAuthorization(false);
                }
              })
              .catch((error) => {
                console.log("failed to logout after session expiry", error);
              });
          },
        },
      ]
    );
  }
  return response;
});

/** Defined my other api functions called inside my other components */

function TestSampleApi() {
  try {
    return new Promise(async function (resolve, reject) {
      const response = await service.get("https://jsonplaceholder.typicode.com/users");
      if (response.data != null) {
        resolve(response.data);
      } else {
        reject(response.status);
      }
    });
  } catch (error) {
    console.log("request error", error.message);
  }
}

export {
  TestSampleApi,
  /** Exporting other api functions as well */
};