Reactjs 无法使用react本机上下文'；axios拦截器中的s属性

我试图通过拦截器在每个axios请求和响应上添加每个登录用户的访问令牌作为授权头。当我登录时，我将访问令牌存储在React context&Secure Storage中。从存储中检索访问令牌是可行的，但这需要始终保持用户。我在登录中使用了“记住我”复选框，因此如果用户取消选中该复选框，则用户的访问令牌将不会存储在SecureStorage中。所以，基本上我试图从上下文中检索令牌，但它总是空的

为了使用拦截器的上下文，我遵循了以下步骤。我的背景是：

export const AuthContext = React.createContext<AuthContextData>({
  accessToken: null,
  refreshToken: null,
  signIn: async (): Promise<void> => {},
  signOut: async (): Promise<void> => {}
} as AuthContextData);

在函数顶部设置

console.log（accessToken）

，在

GetAuthHeader（）方法中设置另一个，第一个返回正确的访问令牌，另一个总是
NULL



以下是我声明我的App.tsx的方式：


我做错了什么

import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
import React, { useEffect } from "react";
import {
  ACCESS_TOKEN,
  useAuth
} from "../providers/AuthenticationProvider";
import { AuthenticationService } from "../services/AuthenticationService";
import * as SecureStorage from "../services/SecureStorage";

export const axiosAuthInstance = axios.create();

const AuthenticationInterceptor = ({
  children
}: {
  children: React.ReactNode;
}): React.ReactElement => {
  const { accessToken, refreshToken, signOut } = useAuth();
  console.log("First console log: ", accessToken); // At this point, I always have the right access token.

  useEffect(() => {
    axiosAuthInstance.interceptors.request.use(
      async (config: AxiosRequestConfig) => {
        const userToken = await GetAuthorizationHeader();
        config.headers = {
          Authorization: `Bearer ${userToken}`
        };
        return config;
      },
      (error) => {
        Promise.reject(error);
      }
    );

    axiosAuthInstance.interceptors.response.use(
      (response: AxiosResponse) => {
        return response;
      },
      async (error) => {
        const status = error.response ? error.response.status : null;
        const originalRequest = error.config;
        if (status === 401 && !originalRequest._retry) {
          originalRequest._retry = true;
          await RefreshToken();
          const userToken = await GetAuthorizationHeader();
          originalRequest.headers.Authorization = `Bearer ${userToken}`;
          return axiosAuthInstance(originalRequest);
        }

        return Promise.reject(error);
      }
    );
  }, []);

  async function RefreshToken() {
    const authenticationService = new AuthenticationService();
    try {
      const response = await authenticationService.RefreshToken(refreshToken!);
      await SecureStorage.setItemAsync(ACCESS_TOKEN, response.access_token);
    } catch (error) {
      const status = error.response ? error.response.status : null;
      if (status === 400 || status === 401) {
        await authenticationService.LogoutAsync(refreshToken!);
        await signOut();
      }
    }
  }

  async function GetAuthorizationHeader() {
    const authenticationService = new AuthenticationService();
    const clientCredentials = await authenticationService.ClientCredentials();
    console.log("Second console log: ", accessToken); // At this point, accessToken is always NULL
    return accessToken ?? clientCredentials;
  }

  return children as React.ReactElement;
};

export default AuthenticationInterceptor;