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

Question

在更新配置文件时，profile.name通过导航链接(导航.js(中的useContext()显示。但是一旦页面刷新或在注销期间 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...

Answer 1

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