Рендер не ждет componentWillMount - PullRequest
Новая
       5

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

0 голосов
/ 04 июня 2018

Я работаю над тем, чтобы перенаправить на домашнюю страницу, если уже вошел в систему. Я получаю информацию для входа в систему с помощью 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.log('not logged in');
                this.setState({login: true});
            } else if (err.response.status === 500) {
                console.log('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.log("clicked")
        window.location.href = "http://localhost:3000/auth/github";
    }


    render() {
        const {children} = this.props;
        const {fixed} = this.state;
        if (this.state.toStudent) {
            console.log("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>


        );
    }
    
}

1 Ответ

0 голосов
/ 04 июня 2018

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

componentWillMount был устарел

...