Реагировать на состояние установки с помощью async / await - PullRequest
Новая
       8

Реагировать на состояние установки с помощью async / await

0 голосов
/ 05 июля 2018

Итак, я устанавливаю свое состояние в конструкторе с помощью: 

constructor(props: IProps) {
    super(props);
    const nav = NavService.getNav();
    const user = AuthService.getProfile();

    this.state = {
        activeNav: 0,
        nav: nav ? nav : [],
        showDropdown: false,
        showNavDropdown: false,
        user: user ? user : [],
    };
}

Однако я замечаю некоторые асинхронные проблемы, поэтому хочу сделать асинхронные getNav () и getProfile () и ожидать их. Очевидно, что я не могу сделать это в конструкторе, потому что конструкторы не могут быть асинхронными, и поэтому я не могу использовать await. Теперь я знаю, что могу просто бросить это в async componentDidMount(), но это приводит к удвоению render(). Как я могу оптимизировать это?

1 Ответ

0 голосов
/ 05 июля 2018

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

Вы можете сохранить дополнительную переменную состояния loading и просто возвращать null в методе рендеринга, пока ваши данные не загрузятся.

Пример 

class App extends React.Component {
  state = {
    activeNav: 0,
    nav: [],
    showDropdown: false,
    showNavDropdown: false,
    user: [],
    loading: true
  };

  componentDidMount() {
    Promise.all(NavService.getNav(), AuthService.getProfile())
      .then(([nav, user]) => {
        this.setState({ nav, user, loading: false });
      })
      .catch(error => {
        this.setState({ loading: false });
      });
  }

  render() {
    const {
      activeNav,
      nav,
      showDropdown,
      showNavDropdown,
      user,
      loading
    } = this.state;

    if (loading) {
      return null;
    }

    // ...
  }
}
...