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

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

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

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

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

...

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

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


reactjs asynchronous call mount
person Jeny    schedule 16.04.2019    source источник
comment
Вы можете сократить логику рендеринга до showSuccessPage ? <SuccessPage /> : <FailurePage />.   -  person Adam    schedule 16.04.2019

Ответы (1)


arrow_upward
1
arrow_downward

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

  ...
  {state.accountFetched && (
    state.accountFetchSuccess ? <SuccessPage/> : <FailurePage/>
  )}
  ...
person Estus Flask    schedule 16.04.2019