我有一个简单的React App。我定义了几个路由，其中之一是Login。用户成功登录后，我要在顶部菜单中显示其用户名。我正在使用localStorage来存储值，并且我希望它会在值更改时自动更新。但是，我需要刷新页面才能看到更改。我想念什么？
这是主要App组件的代码：
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
Link,
Redirect
} from 'react-router-dom';
import Login from './Login.js'
import Register from './Register.js'
import About from './About.js'
class App extends Component {
render() {
return (
<Router>
<div className="topMenu">
<Link to="/">Login</Link>
<span> </span>
<Link to="/register">Register</Link>
<span> </span>
<Link to="/about">About</Link>
<span> </span>
<span>Logged in user: {localStorage.getItem("username")}</span>
</div>
<div className="container">
<Route exact path="/" component={Login}/>
<Route path="/register" component={Register}/>
<Route path="/about" component={About}/>
</div>
</Router>
);
}
}
export default App;
在login（）方法的Login组件中，我只是将用户名添加到localStorage中：
localStorage.setItem("username", username);
更新App组件中的显示值是否足够？
一种实现方式是在应用程序组件状态下存储用户名，并在应用程序组件中创建一个函数，该功能更新状态下的用户名并将该函数作为回调传递给登录组件。登录成功后，登录页面将调用此函数并更新应用程序组件中的用户名。由于状态已更改，因此将使用新状态（更新的用户名）再次呈现应用程序组件。
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
Link,
Redirect
} from 'react-router-dom';
import Login from './Login.js'
import Register from './Register.js'
import About from './About.js'
class App extends Component {
state = { username: "" };
updateUsername = () => {
const username = localStorage.getItem("username");
this.setState({ username: username });
};
render() {
return (
<Router>
<div className="topMenu">
<Link to="/">Login</Link>
<span> </span>
<Link to="/register">Register</Link>
<span> </span>
<Link to="/about">About</Link>
<span> </span>
<span>Logged in user: {localStorage.getItem("username")}</span>
</div>
<div className="container">
<Route
path="/login"
render={props => <Login {...props} updateUsername={updateUsername} />}
/>
<Route path="/register" component={Register}/>
<Route path="/about" component={About}/>
</div>
</Router>
);
}
}
export default App;现在该updateUsername功能应该可以通过登录组件中使用this.props.updateUsername。登录成功后，可以调用此函数以更新应用程序组件中的状态。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句