Блог

Главная - Вопросы по программированию - Как предотвратить двойной рендеринг в react на основе асинхронного вызова в componentDidMount?

Как предотвратить двойной рендеринг в react на основе асинхронного вызова в componentDidMount?

#reactjs #asynchronous #call #mount

#reactjs #асинхронный #вызов #монтировать

Вопрос:

У меня есть родительский компонент и два дочерних компонента. Один успех и один сбой Мне нужно показать эти компоненты на основе асинхронного вызова при загрузке страницы. Итак, я выполнил асинхронный вызов на странице componentDidMount. Но это вызывает двойной рендеринг.

 constructor(props) {
  super(props)
  this.state = {
    showSuccessPage: false
  }
}

componentDidMount() {
  ActiveAccount.fetchActiveAccount(this.handleSuccess, this.handleFailure)
}

handleSuccess() {
  this.setState({
    showSuccessPage: true
  )}
}

...

render() {
  ...
  return (
    {showSuccessPage amp;amp; <SuccessPage />}
    {!showSuccessPage amp;amp; <FailurePage />}
  )
}

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

Комментарии:

1. Вы можете сократить свою логику рендеринга до showSuccessPage ? <SuccessPage /> : <FailurePage /> .

Ответ №1:

Для рендеринга компонентов по назначению двоичного состояния недостаточно. Это может быть выражено с помощью одного свойства состояния showSuccessPage , которое имеет 3 значения, undefined , true и false . Или с 2 свойствами состояния:

   ...
  {state.accountFetched amp;amp; (
    state.accountFetchSuccess ? <SuccessPage/> : <FailurePage/>
  )}
  ...
Метки: