Реакция - правильный способ ожидания загрузки страницы?

Question

В React JS, как правильно ждать загрузки страницы перед запуском какого-либо кода?

Сценарий: служба входа аутентифицирует пользователя, а затем перенаправляет его (с помощью cook ie). ), чтобы React App. Затем приложение React сразу ищет повара ie и проверяет его по конечной точке.

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

Как правильно запустить код? Я попытался обернуть в компонентDidMount (), не работает!

Answer 1

Я бы предложил вам использовать состояние в главном компоненте вашего приложения (обычно App.jsx), которое будет контролировать загрузку. При запуске приложения состояние будет истинным, и только после проверки всего, что вам нужно проверить, оно станет ложным. Если состояние загружается, вы покажете вертушку или все, что хотите, а когда она не загружается, веб-сайт:

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { loading: true }
    }


    componentDidMount () {
       checkToken()
           .then(() => this.setState({ loading: false });

    }

    if (loading) {
        return <Spinner /> // or whatever you want to show if the app is loading
    }
    return (
        ...rest of you app
    )
}

Если есть сомнения, просто дайте мне знать.