我有以下的身份验证上下文提供者。在用户成功认证后，我设置了一些令牌值

import axios from "axios"; import { createContext, useContext, useState } from "react"; import Constants from "../common/Constants"; import Payload from "../classes/Payload"; const AuthenticationContext = createContext({ loggedUserToken: {}, session: {} }); export const useAuthenticationStatus = () => useContext(AuthenticationContext); const AuthenticationContextProvider = ({children}) => { const [loggedUserToken, setLoggedUserToken] = useState({}); const [session, setSession] = useState({}); const authenticateUser = async (loginEndpoint, email, userPassword) => { let result = {}; let statusCode = -1; let statusText = ''; let message = ''; let session = ''; let postData = {username: email, password: userPassword}; await axios.post(loginEndpoint, postData, {headers: headerData}) .then( data => { statusCode = data.data.code; statusText = data.data.statusText; session = data.data.session; message = data.data.message; if (statusCode === 200) { let challengeName = message.challengeName; let payloadData = ''; if (session !== null && message.challenge !== null) { let userEmail = message.userEmail; setSession({'sD': session, 'sE': userEmail }); if (challengeName === Constants.COGNITO_CHALLENGE_NEW_PASSWORD_REQUIRED ) { statusText = Constants.AUTHENTICATION_SET_NEW_PASSWSORD; payloadData = challengeName; } result = { 's': true, 'sT': statusText, 'p': payloadData}; } else { statusText = Constants.AUTHENTICATION_LOGIN_SUCCESSFUL; payloadData = message; let userpayloadData = new Payload(payloadData); //set use state for user token - ERROR IN HERE //loggedUserToken IS NOT SET HERE setLoggedUserToken(loggedUserToken => userpayloadData); result = { 's': true, 'sT': statusText, 'p': payloadData}; } } }).catch( error => { result = { 's': false, 'sT': Constants.COMMON_ERROR_MESSAGE, 'p': ''}; }); return result; } return (  {children}  ) }; export default AuthenticationContextProvider;

我在主页视图中使用了"loggedUserToken"值来检查它是否可用。

import { useEffect } from "react"; import { useAuthenticationStatus } from "../../services/AuthenticateContextProvider"; function HomeView() { const {loggedUserToken} = useAuthenticationStatus(); //empty object output console.log(loggedUserToken); useEffect( () => { //empty object output console.log(loggedUserToken); }) return ( 
 
 
 
 
 
 
 
List
 
 
 
 
 
 
 
 
 ); } export default HomeView;

即使您在身份验证提供者中设置了它，"loggedUserToken"始终为空（即使您在身份验证提供者上的"setLoggedUserToken"之后立即将其打印到控制台）。"setSession"已正确设置，在另一个视图中读取该值。

我不确定这里出了什么问题

更新：以下是我如何使用身份验证提供者。"Outlet"替换了MainLayout中的不同视图。

import { Outlet } from "react-router-dom"; import MainHeader from "../common/MainHeader"; import MainFooter from "../common/MainFooter"; import AuthenticationContextProvider from "../../services/AuthenticateContextProvider"; function MainLayout() { return( 
  
  
 
 
 
  
 
 
   
 ); } export default MainLayout;

import { Outlet } from "react-router-dom"; import MainHeader from "../common/MainHeader"; import MainFooter from "../common/MainFooter"; import AuthenticationContextProvider from "../../services/AuthenticateContextProvider"; function MainLayout() { return( 
  
  
 
 
 
  
 
 
   
 ); } export default MainLayout;

import { Outlet } from "react-router-dom"; import MainHeader from "../common/MainHeader"; import MainFooter from "../common/MainFooter"; import AuthenticationContextProvider from "../../services/AuthenticateContextProvider"; function MainLayout() { return( 
 
  
 
 
 
  
 
 
  
 ); } export default MainLayout;

import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/js/bootstrap.js'; import './App.css'; import { Route, Routes } from 'react-router-dom'; import AuthenticationLayout from './components/layouts/AuthenticationLayout'; import LoginView from './components/authentication/LoginView'; import ForgotPasswordView from './components/authentication/ForgotPasswordView'; import MainLayout from './components/layouts/MainLayout'; import HomeView from './components/main/HomeView'; import ConfirmEmailView from './components/authentication/ConfirmEmailView'; import SetNewPassword from './components/authentication/SetNewPassword'; import AuthenticationContextProvider from './services/AuthenticateContextProvider'; function App() { return ( <>    }>  }>  }> }>  }>  }>   }>  }>     ); } export default App;