useState dans ReactJS ne fonctionne pas lors de la mise à jour de l'objet
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 (
<AuthenticationContext.Provider
value={{loggedUserToken, authenticateUser, session, setPermanentPassword}}>
{children}
</AuthenticationContext.Provider>
)
};
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 (
<div className="col-12">
<div className="row mt-2">
<div className="col-12">
</div>
</div>
<div className="row mt-5 incident-list-map">
<div className="col-md-4">
<h2>List</h2>
<div></div>
</div>
<div className="col-md-8">
<div id="map" className="map">
</div>
</div>
</div>
</div>
);
}
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(
<div className="main-layout">
<AuthenticationContextProvider>
<header>
<nav className="navbar navbar-expand-md fixed-top header-area">
<MainHeader></MainHeader>
</nav>
</header>
<main className="flex-shrink-0 main-area">
<div className="container-fluid">
<div className="main-content">
<Outlet />
</div>
</div>
</main>
<footer className="footer mt-auto py-3 footer-content">
<div className="container-fluid">
<MainFooter></MainFooter>
</div>
</footer>
</AuthenticationContextProvider>
</div>
);
}
export default MainLayout;
