Reactjs 在重定向之前，您将如何等待componentDidMount/componentWillMount内部的获取？反应

主要的问题是，我在该组件卸载后设置了状态，我需要一种适当的方式来等待提取，而不发出同步请求

我通过为呈现方法添加另一个测试来解决问题，我忘记发布我的答案：

class AuthRoute extends React.Component {
    constructor(props){
        super(props);
        this.state = {checking: true, loggedIn:false};
    }

    componentDidMount(){
        fetch('/sourcing/auth/loggedin',{credentials:'include', method:'POST'})
            .then(res => res.json())
            .then(user => {
                console.log('user dans le fetch', user);
                if(user !== null)
                    this.setState({loggedIn: true, checking: false});
            })
    }

    render() {
        const {component , ...rest} = this.props;
        return(
            !this.state.checking && this.state.loggedin
                ? <DefaultLayoutRoute {...rest} component={component} />
                : <Redirect to='/login' />
        );
    }
}

类AuthenticatedRoute扩展React.Component{
建造师（道具）
{
超级（道具）；
this.state={checking:true，loggedIn:false}；
this.validate=this.validate.bind（this）；
}
验证=（用户、日志、检查）=>{
存储用户（用户）；
this.setState（{loggedIn:loggedIn，checking:checking}）；
if（loggedIn）console.log（“loggedIn”）；
} 
组件willmount（）{
获取（'/sourcing/auth/loggedin'，{凭证：'include'，方法：'POST'}）
.then（res=>res.json（））
。然后（用户=>{
如果（用户）{
验证（用户、真、假）；
}
其他的
验证（null、false、false）；
})
.catch（（）=>this.validate（null、false、false））
}
render（）{
const{component:component，…rest}=this.props；
if（此.状态.检查）{
返回加载…}/>
}
if（this.state.loggedIn）{
返回
}
if（！this.state.checking&！this.state.loggedIn）{
返回
}
}
}

是否要将状态保持在

PrivateRoute

？如果是这样，则使用

render

方法将其放入类中。很好。谢谢@TomFenech，我可以阅读文档，我读过了，但我想将这个特定组件转换为一个类，并获得相同的行为，我没有，因为我得到了错误更新你的问题，你尝试了什么，你得到了什么错误，所以有代码，有什么问题吗？@TomFenech实际上可以工作，但问题是相同的，如果我想在获取之后重定向到登录，它实际上从不等待获取完成再重定向（我希望在需要自动重定向的任何地方都使用该组件），我将更新我的问题

class AuthRoute extends React.Component {
    constructor(props){
        super(props);
        this.state = {checking: true, loggedIn:false};
    }

    componentDidMount(){
        fetch('/sourcing/auth/loggedin',{credentials:'include', method:'POST'})
            .then(res => res.json())
            .then(user => {
                console.log('user dans le fetch', user);
                if(user !== null)
                    this.setState({loggedIn: true, checking: false});
            })
    }

    render() {
        const {component , ...rest} = this.props;
        return(
            !this.state.checking && this.state.loggedin
                ? <DefaultLayoutRoute {...rest} component={component} />
                : <Redirect to='/login' />
        );
    }
}

class AuthenticatedRoute extends React.Component {

    constructor(props)
    {
        super(props);
        this.state = {checking: true, loggedIn:false};
        this.validate = this.validate.bind(this);
    }

    validate = (user, loggedIn , checking) => {
        storeUser(user);
        this.setState({loggedIn: loggedIn, checking: checking});
        if(loggedIn) console.log("loggedIn");
    } 

    componentWillMount(){
        fetch('/sourcing/auth/loggedin',{credentials:'include', method:'POST'})
            .then(res => res.json())
            .then(user => {
                if(user){
                    this.validate(user, true ,false);
                }
                else
                    this.validate(null, false, false);
            })
            .catch(() => this.validate(null, false, false))
    }

    render() {
        const {component:Component , ...rest} = this.props;

        if(this.state.checking){
            return <DefaultLayoutRoute {...rest} component={() => <div>Loading...</div> } />
        }
        if(this.state.loggedIn){
           return <DefaultLayoutRoute {...rest} loggedIn={this.state.loggedIn} component={Component} />
        }
        if(!this.state.checking && !this.state.loggedIn){
            return <Redirect to='/login' />
        }
    }
}