Ich habe den folgenden Authentifizierungskontextanbieter. Nachdem sich der Benutzer erfolgreich authentifiziert hat, lege ich einige Tokenwerte fest

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;

Ich habe den Wert „loggedUserToken“ in der Startansicht verwendet, um zu überprüfen, ob er verfügbar ist.

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“ ist immer leer, auch wenn Sie es im Authentifizierungsanbieter festlegen (auch wenn Sie es direkt nach „setLoggedUserToken“ beim Authentifizierungsanbieter auf der Konsole ausdrucken). „setSession“ ist richtig gesetzt, der Wert wird in einer anderen Ansicht gelesen.

Ich bin mir nicht sicher, was hier falsch ist

Update: So verwende ich den Authentifizierungsanbieter. „Outlet“ ersetzt verschiedene Ansichten im 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;