Все компоненты отображаются при перенаправлении с помощью withRouter ()

Question

Я новичок в 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);

Answer 1

Это плохая практика делать вызовы API в componentWillMount.Вы не можете ожидать, что вызов API получит результаты в то время, когда компонент будет render.Всегда совершайте вызовы API в componentDidMount.

классе 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>
          );
        }

   }