我是Reactjs的新手,我了解路由。在这里,我使用withRouter()
进行程序重定向。
我认为应为constructor->Willmount->render
的流程,但当前为constructor->render->willMount->render
。
当我执行此代码时,会发生什么事,即显示/login
处的第一个组件,然后显示该Header组件(向上登录组件并在其后显示标题)
class Main extends Component {
constructor(props) {
super(props);
this.state = { userInfo: ''};
}
async componentDidMount() {
let user = await apiGateway.getUserInfo();
console.log(' did Mount1');
if(user == null){
console.log('Redirect');
this.props.history.push('/login');
}else{
console.log('data');
this.setState({ userInfo : user.data });
}
}
render() {
const { authenticate, userInfo, onlineUser } = this.state;
console.log('main component');
return (
<div className='Main'>
<div className='Main-header'>
<Header userInfo = {userInfo}/>
</div>
</div>
);
}
}
export default withRouter(Main);
最佳答案
在componentWillMount
中进行api调用是错误的做法。
您不能期望api调用会及时收到该组件render
的结果。
始终在componentDidMount
中进行api调用。
类Main扩展Component {
constructor(props) {
super(props);
this.state = { userInfo: ''};
}
async componentDidMount() {
let user = await apiGateway.getUserInfo();
console.log(' did Mount1');
if(user == null){
console.log('Redirect');
this.props.history.push('/login');
}else{
console.log('data');
this.setState({ userInfo : user.data });
}
}
render() {
const { authenticate, userInfo, onlineUser } = this.state;
console.log('main component');
return (
<div className='Main'>
<div className='Main-header'>
<Header userInfo = {userInfo}/>
</div>
</div>
);
}
}