useContext values gets cleared during page refresh and logout

Question

While updating the profile, profile.name gets displayed via useContext()in navlink (Navigation.js). But as soon as page gets refresh or during logout the profile.name gets cleared, also profile.photo is not displaying too in navlink.

I want to display the name and photo always in nav link, how can i do that. ?

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...

score 6 · Accepted Answer · answered Jun 17 '20 at 02:12

6

Sure. Because react is client-side, so whenever you refresh data was lost (contextAPI or any state management). You can use useEffect or componentDidMount lifecycle to fetch data user again every mount App component

answered Jun 17 '20 at 02:12

cuongdevjs

711
6
15

1

Ok, Where should i use again the `useEffect()` again.? Should I use that in Navigation.js ? – soccerway Jun 17 '20 at 02:19
Also may I also know why the `profile.photo` is not there ? – soccerway Jun 17 '20 at 02:20
For global state, fetch user data on Root component to assurance data always available before render child component – cuongdevjs Jun 17 '20 at 02:21
remind that all the state will be lost whenever you refresh – cuongdevjs Jun 17 '20 at 02:22
Do you mean to use `useEffect()` on root component ie, `UserProfileProvider.js` ? – soccerway Jun 17 '20 at 02:37
1

place on inside App.js – cuongdevjs Jun 17 '20 at 07:37

useContext values gets cleared during page refresh and logout

1 Answers1