Я работаю над перенаправлением на домашнюю страницу, если уже вошел в систему. Я получаю информацию для входа с помощью команды ping, и если она успешна, я устанавливаю состояние, которое будет проверяться при рендеринге и перенаправлении. Но на несколько секунд он показывает страницу входа, а затем перенаправляет на домашнюю страницу. Что я делаю неправильно?
export default class extends Component {
constructor(props) {
super(props);
this.state = {authenticated:false, login: false, loading: true, expand : false, toStudent : false};
this.handleClick = this.handleClick.bind(this)
}
async componentWillMount() {
try{
const response = await axios.get('http://localhost:3000/api/system/ping', {withCredentials: true});
await this.setState({'toStudent': true});
}
catch(err){
if (err.response.status === 401) {
console.info('not logged in');
this.setState({login: true});
} else if (err.response.status === 500) {
console.info('card not selected');
this.setState({authenticated: true});
}
}
}
hideFixedMenu = () => this.setState({fixed: false});
showFixedMenu = () => this.setState({fixed: true});
toggleExpand = () => this.setState({expand: !this.state.expand});
handleClick () {
console.info("clicked")
window.location.href = "http://localhost:3000/auth/github";
}
render() {
const {children} = this.props;
const {fixed} = this.state;
if (this.state.toStudent) {
console.info("Routing to student")
return <Redirect push to = {{pathname: "/student"}}/>;
}
return (
<Responsive>
<Visibility once = {false} onBottomPassed = {this.showFixedMenu} onBottomPassedReverse = {this.hideFixedMenu}>
<Segment inverted textAlign='center' style = {{padding: '1em 0em'}} vertical>
<HeadingComponent/>
</Segment>
<Segment inverted textAlign='center' style = {{height: '500px', padding: '5em 5em',}} vertical>
{!this.state.authenticated && <Button icon = "github" primary size='huge' content = "Athenticate with github" onClick = {this.handleClick} style = {{margin: '1em'}}/>}
{this.state.authenticated && !this.state.login && <BadgesComponent click = {this.toggleExpand}/>}
{this.state.expand && <LoginComponent onBackClick = {this.toggleExpand}/>}
</Segment>
</Visibility>
<ContentComponent/>
</Responsive>
);
}
}


![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы указали componentWillMount как async. Однако React выполняет ловушку времени жизни, но не дожидается ее завершения. Вы должны отобразить страницу с индикатором загрузки и получить данные в componentDidMount. Посмотрите здесь: Асинхронный вызов в componentWillMount завершается после метода рендеринга
componentWillMount был устарел