Значения useContext очищаются при обновлении страницы sh и выходе из системы - PullRequest
Новая
       94

Значения useContext очищаются при обновлении страницы sh и выходе из системы

0 голосов
/ 17 июня 2020

При обновлении профиля profile.name отображается через useContext() в навигационной ссылке (Navigation. js). Но как только страница получает refre sh или во время выхода из системы, profile.name очищается, а также profile.photo не отображается в навигационной ссылке.

Я хочу всегда отображать имя и фото в навигационной ссылке, Как мне это сделать. ?

UserProfileProvider.js

import React, { useMemo, useState} from 'react';
import UserProfileContext from '../context';

const UserProfileProvider = ({children}) => {

    const [profile, setProfile] = useState({ _id: '', photo: '', name: '', email:'', phonenumber:'', position:'', privilege:'', password:''});

    const value = useMemo(() => ({
        profile, setProfile
    }), [profile]);


    return (
       <UserProfileContext.Provider value={value}>
           {children}
       </UserProfileContext.Provider>
    )   
}
export default UserProfileProvider;

Navigation.js

import React, { useContext } from 'react';
import { NavLink, useHistory } from 'react-router-dom';
import UserProfileContext from '../context';


const Navigation = () => {
    const history = useHistory();
    const {profile} = useContext(UserProfileContext); // added 16 jun based on stack

    const divStyle = {
        float:'left',
        color: '#64cad8', 
        padding: '0px 0px 0px 10px',
        font:'Lucida, sans-serif'
      };

    function logout() {
        localStorage.removeItem('loginEmail')
        localStorage.removeItem('Privilege')
        history.push('/login')
        window.location.reload(true);
      }

    return localStorage.getItem('loginEmail') &&
        <div className="App">
            <div className="wrapper">
                <div id="wrap">
                    <nav className="siteNavigation_nav_links">
                    <div className="clubLogo landing"style={divStyle}><b>Southside Soccer</b></div>
                        <NavLink className="mobile_register_link" to="/">Home</NavLink>
                        <NavLink className="mobile_register_link" to="/profile">Profile</NavLink>
                        <NavLink className="mobile_login_link" to="/login" onClick={logout}>Logout</NavLink>
                        <NavLink className="mobile_login_link" to='/aboutus'>About us</NavLink>
                        <span className="mobile_login_link">{profile.name}<img className="nav_profile"src={profile.photo}></img></span>
                    </nav>
                </div>
            </div>
        </div>
}

export default Navigation;

App.js

import UserProfileProvider from './components/UserProfileProvider.js';

var ReactDOM = require("react-dom");

const App = () => {                       // added 16 jun based on stack

  return (
  <BrowserRouter>
    <UserProfileProvider>
          <>
        <Navigation />
          <Switch>
              <ProtectedRoute exact path="/" component={Home} />
              <ProtectedRoute path="/profile" component={Profile} />
              <ProtectedRoute path="/aboutus" component={Aboutus} />
              <Route path="/register" component={Register} />
              <Route path="/login" component={Login} />
              <Route exact path="*" component={ErrorPage} />
          </Switch>
          </>
      </UserProfileProvider>
   </BrowserRouter>
  );
};
ReactDOM.render(
  React.createElement(App, null),
  document.getElementById("root")
);

export default App;

Profile.js

import React, {useContext, useEffect, useState } from "react";
import UserProfileContext from '../context';

const {profile, setProfile} = useContext(UserProfileContext);
...// rest of the Profile component code...

1 Ответ

1 голос
/ 17 июня 2020

Конечно. Поскольку реакция выполняется на стороне клиента, поэтому всякий раз, когда вы обновляете sh, данные были потеряны (contextAPI или любое управление состоянием). Вы можете использовать жизненный цикл useEffect или componentDidMount для повторного получения данных пользователя при каждом монтировании App компонента

...