我是这个神奇网站的新手,我只是在我的 React 应用程序中遇到了问题。
这是 index.js
我在这个页面中使用 react-router-dom
我只需要显示 this.state.show
用于谁在主页中,因此在 login.js 请求
中,我创建了 'loginToken'
使用此代码 sessionStorage.setItem('loginToken ', '值')
现在我正在对 index.js 中的 sessionStorage.getItem('loginToken')
进行验证
一切正常,但我的问题是当我在主页中时此文本'Welcome Back'
不会自动出现我需要刷新主页看见了。我不知道为什么会这样。
是因为我使用了 componentWillMount 吗?
我尝试使用 componentDidMount
我遇到了同样的问题
import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Login from './users/login';
import home from './news/index';
class App extends Component {
constructor(props){
super(props);
this.state = {
show: false
}
}
componentWillMount(){
if(sessionStorage.getItem('loginToken')){
this.setState({show: true});
}else{
this.setState({show: false});
}
}
render() {
return (
<div>
{this.state.show?
<div>welcome back</div>:null
}
<Router>
<Switch>
<Route path="/login" component={Login} />
<Route path="/home" component={home} />
</Switch>
</Router>
</div>
)
}
}
export default App;
非常感谢你帮助我。
最佳答案
此问题是 componentWillMount
仅在应用首次运行时触发一次,因为它是树中最顶级的组件。
您应该考虑将一个函数作为 prop 传递到登录组件中,并在登录组件中调用它以触发父组件中的状态更改。您可以在此 article 中遵循一种方法来执行此操作.
最简单的方法是将欢迎文本移动到仪表板或主页路由中,这样它就会按照您的预期进行安装和卸载,并且您可以在该组件中使用当前的方法。
关于javascript - 如果功能不是最新的 react ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48531956/