Рендер не ждет componentWillMount

Я работаю над перенаправлением на домашнюю страницу, если уже вошел в систему. Я получаю информацию для входа с помощью команды 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>


        );
    }
    
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
737
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

componentWillMount был устарел

Другие вопросы по теме