Как бы вы подождали, пока выборка внутри componentDidMount/componentWillMount будет перенаправлена? ReactJs

Question

function PrivateRoute ({component: Component, authed, ...rest}) {
 return (
  <Route
    {...rest}
    render={(props) => authed === true
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}}/>}
  />
 )
}

Я позаимствовал предыдущий компонент и хотел бы сохранить свойство состояния, например, loggedIn, а затем обновить состояние этого компонента после получения обещания, так как я не хочу хранить логическое свойство, такое как authed в любом месте. Также я новичок в реакции и реакции-роутер (V4) Я практиковал это в течение 3 недель, спасибо заранее! Я получил это до сих пор:

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' />
        );
    }
}

Основная проблема заключается в том, что я установил состояние после этого, этот компонент был размонтирован, и я хочу, чтобы правильный способ ожидал выборки, не делая синхронный запрос

Answer 1

Я решил свою проблему, просто добавив еще один тест для метода рендеринга, я забыл опубликовать свой ответ:

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' />
        }
    }
}