Контекст реагирования: ожидание значения контекста для загрузки заголовка

Question

Доброе утро, Здесь я пытаюсь использовать контекст аутентификации и пользовательские данные, которые я получаю от моего api соединения, я получаю свои данные отлично, и соединение работает, пока все не идет хорошо. Но я бы хотел переместить свой контекст в заголовок, чтобы отобразить его в заголовке. Но у меня есть проблема, после входа в систему мне нужно перезагрузить страницу один раз, прежде чем имя пользователя в заголовке, я заключаю, что заголовок загружается до того, как контекст обновляет значения. И я не очень понимаю, как ждать загрузки переменных контекста, прежде чем отобразится заголовок

Вот мой контекст:

import React from 'react';

export default React.createContext({
    isAuthenticated: false,
    setIsAuthenticated: (value) => {},
    userData: {}
})

Вот мое приложение. js:

const App  = () => {

    const [isAuthenticated, setIsAuthenticated] = useState(
        AuthAPI.isAuthenticated()
    );

    const[userData, setUserData] = useState(
        authAPI.getUserData()
    )

    const HeaderWithRouter = withRouter(Header);

    return (
        <AuthContext.Provider value={{isAuthenticated, setIsAuthenticated,userData}}>
            <HashRouter>
                <HeaderWithRouter />
                <div className="container">
                    <Switch>
                        <Route exact path="/" component={Home}/>
                        <Route exact path="/login" component={Login}/>
                        <Route exact path="/profil/:id" component={Profil}/>
                        <Route exact path="/register" component={Register}/>       
                    </Switch>
                </div>
                <Footer/>
            </HashRouter>
            <ToastContainer position={toast.POSITION.BOTTOM_RIGHT} />
        </AuthContext.Provider>
    )
}

ReactDOM.render(<App/>, document.getElementById('app'));

Вот мой заголовок:

const Header = ({history}) => {

    const {isAuthenticated, setIsAuthenticated,userData} = useContext(AuthContext)
    const [isToggled, setToggled] = useState(false);

    const handleLogout = () => {
        authAPI.logout()
        setIsAuthenticated(false)
        toast.success('Vous êtes déconnecté !')
        history.push('/')
    }

    const toggleTrueFalse = () => setToggled(!isToggled);

    return( 
        <nav className="headerNav">
            <Link to="/"><img src={Logo} className="VSLogo"/></Link>
            <ul>
                <li className="navItem"><Link to="/teams">Teams</Link></li>
                <li className="navItem"><Link to="/tournaments">Tournaments</Link></li>
                <li className="navItem"><Link to="/esport">Esport</Link></li>
            </ul>
            {(!isAuthenticated && (
                <>
                    <Link to="/register" className="signUpBtn">Sign up</Link>
                    <Link to="/login" className="connexionBtn">Sign in</Link>
                </>
            )) || (
                <>
                    <span onClick={toggleTrueFalse}>{userData.pseudo}</span>
                    <div className={`userPopup ${isToggled ? "show" : ""}`} style={{}}>
                        <ul>
                            <li><span className="font-heavy red"><Link to={'/profil/' + userData.id}>{userData.pseudo}</Link></span></li>
                            <li>Paramètres</li>
                            <li onClick={handleLogout}>Deconnect</li>
                        </ul>
                    </div>  
                </>
            )}
        </nav>
    )
}

export default Header;

Здесь часть моего компонента входа в систему для установки IsAuthenticated:

const { setIsAuthenticated } = useContext(AuthContext);

    const [credentials, setCredentials] = useState({
      username: "",
      password: ""
    });

    const [error, setError] = useState("");

      //Gestion du submit
    const handleSubmit = async event => {
        event.preventDefault();
        try {
            await AuthAPI.authenticate(credentials);
            setError("");
            setIsAuthenticated(true);
            history.replace("/");
        } catch (error) {
            setError("Error");
        }
    };

К концу заголовка userData. псевдо должен отображать имя пользователя, но если я не перезагрузить, ничего.

Спасибо!

Answer 1

Попробуйте добавить useEffect, который будет синхронизировать c пользовательских данных, если isAuthenticated изменится:

useEffect(() => {
    if (isAuthenticated) {
        setUserData(AuthAPI.getUserData())
    }
}, [isAuthenticated])