Как я могу ждать завершения настройки init?

Question

У меня есть этот код

class ConnectedApp extends Component {

  constructor(props) {
    super();
    props.initConfig(); // the ajax call that populate the user settings
  }

  render() {

    return (
      <I18nextProvider i18n={i18n}>
        <Router>
          <div className="App" style={appStyle}>
            <Head/>
            <div className="Container">
              <Container/>
            </div>
            <Foot/>
            <Loading/>
            <ToastContainer position="bottom-right" />
          </div>
        </Router>
      </I18nextProvider>
    );
  }
}

Теперь проблема в том, что initconfig является функцией ajax в промежуточном программном обеспечении. Перед рендерингом приложения для зарегистрированного пользователя мне нужно дождаться завершения функции. У кого-нибудь есть предложения?

На самом деле приложение работает при первом входе в систему и выдает ошибку, и эта ошибка устраняется путем обновления вручную.

Answer 1

Вам нужно изменить несколько вещей здесь - во-первых, вам понадобится какой-то способ указать загрузку. Это можно сделать в простейшей форме, используя логическое значение в глобальном или локальном состоянии. Вам также следует переместить ваш метод вызова AJAX в соответствующий метод жизненного цикла компонента componentDidMount.

. Вы хотите указать его в componentDidMount, чтобы компонент был смонтирован и готов к приему реквизитов или изменений состояния.

class ConnectedApp extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.initConfig();
  }

  render() {
    if (this.props.loading === true) {
      return null // this will render nothing until loading is `false`
    }

    return (
      <I18nextProvider i18n={i18n}>
        <Router>
          <div className="App" style={appStyle}>
            <Head/>
            <div className="Container">
              <Container/>
            </div>
            <Foot/>
            <Loading/>
            <ToastContainer position="bottom-right" />
          </div>
        </Router>
      </I18nextProvider>
    );
  }
}

В вашем избыточном состоянии вы хотели бы установить свойство для состояния загрузки. Когда вы запускаете запрос, вы устанавливаете загрузку в значение true, в случае успеха установите его в значение false. Если это не удастся, вам понадобится более расширяемое решение для учета этого, кроме простого «загрузочного» логического значения.

Кроме того, если вы еще не проверили новый API React Hooks, это то, что ваш компонентбудет выглядеть, используя это.

import React, { useEffect } from "react";

const ConnectedApp = ({ initConfig, loading }) => {
  useEffect(() => {
    initConfig() // this will only get called when the component mounts. Same as `componentDidMount`
  }, [])

  if (loading === true) {
    return null // this will render nothing until loading is `false`
  }

  return (
    <I18nextProvider i18n={i18n}>
      <Router>
        <div className="App" style={appStyle}>
          <Head/>
          <div className="Container">
            <Container/>
          </div>
          <Foot/>
          <Loading/>
          <ToastContainer position="bottom-right" />
        </div>
      </Router>
    </I18nextProvider>
  );
}