J'ai le fournisseur de contexte d'authentification suivant. Une fois l'authentification réussie de l'utilisateur, je définis quelques valeurs de jeton

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;

J'ai utilisé la valeur "loggedUserToken" dans la vue d'accueil pour vérifier si elle est disponible.

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" est toujours vide même si vous le définissez dans le fournisseur d'authentification (même si vous l'imprimez sur la console immédiatement après "setLoggedUserToken" sur le fournisseur d'authentification). "setSession" est défini correctement, la valeur est lue dans une autre vue.

Je ne suis pas sûr de ce qui ne va pas ici

Mise à jour : voici comment j'utilise le fournisseur d'authentification. "Outlet" remplace différentes vues dans 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;