如何根据componentDidMount中的异步调用来防止双重渲染？

Question

我有一个父组件和两个子组件。一个成功和一个失败我需要在页面加载时基于异步调用显示这些组件。所以我在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。如何防止双重渲染？

Answer 1

为了按预期呈现组件，二进制状态是不够的。这可以用具有3个值的单状态属性showSuccessPage表示，undefined，true和false。或者有2个州属性：

  ...
  {state.accountFetched && (
    state.accountFetchSuccess ? <SuccessPage/> : <FailurePage/>
  )}
  ...