reactjs - useContext 值在页面刷新和注销期间被清除

Question

更新配置文件时，profile.name 会通过导航链接 (Navigation.js) 中的 useContext() 显示。但是，一旦页面刷新或注销期间，profile.name 就会被清除，profile.photo 也不会在 navlink 中显示。

我想在导航链接中始终显示名称和照片，我该怎么做。 ？

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

Answer 1

当然。因为 React 是客户端的，所以无论何时刷新数据都会丢失(contextAPI 或任何状态管理)。您可以使用 useEffect 或 componentDidMount 生命周期在每次安装 App 组件时再次获取数据用户