首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >渲染未等待componentWillMount

渲染未等待componentWillMount
EN

Stack Overflow用户
提问于 2018-06-05 04:34:07
回答 1查看 770关注 0票数 0

我正在努力重定向到主页,如果已经登录。我正在使用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>


        );
    }
    
}

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-05 04:40:58

您将componentWillMount声明为async。但是,React会执行生存期挂钩,但不会等待它完成。您应该呈现显示“加载指示器”的页面,并在componentDidMount中获取数据。看看这里:Asynchronous call in componentWillMount finishes after render method

componentWillMount已被deprecated

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50688362

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档