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

Question

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

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

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

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

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
    )
}

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

Answer 2

вы можете использовать Suspense и ленивый :)

         import React, { Suspense } from 'react';
    
    const OtherComponent = React.lazy(() => import('./OtherComponent'));
    
    function MyComponent() {
      return (
        <div>
          <Suspense fallback={<div>loading...</div>}>
            <OtherComponent />
          </Suspense>
        </div>
      );
    }

Answer 3

Добавьте это где-нибудь в дереве пользовательского интерфейса (возможно, добавьте в сам корневой компонент)

      // will run once, after app has loaded

useEffect(() => {
  // your code here
}, []);