react爬坑---通過請求接口，返回條件判斷渲染組件AB

在react組件開發中，遇到需要請求接口來判斷展示組件A或者B，但由於react生命周期函數，組件第一次render的時候，接口還沒有返回數據，無法確定render什么組件。此時，新增一個布爾值狀態isResOk: false，如果isResOk為false，請求沒有成功，則不展示任何組件；如果isResOk為true，請求成功，再根據接口返回值判斷展示哪一個組件。

在render函數里面，通過條件1進行判斷接口是否返回：

（1）接口沒有返回，那么return false，不渲染任何組件；

（2）接口有返回，通過條件2判斷展示哪個組件。

class A extends Component {
  static propTypes = {
    children: PropTypes.any,
    isShowInfo: PropTypes.func,
  }
  state = {
    isShow: true,
    isResOk: false,
  }

  componentDidMount() {
    const { isShowInfo } = this.props
    isShowInfo().then(res => {
      this.setState({
        isShow: res.Displayed,
        isResOk: true,
      })
    })
  }

  renderTitleNotic = () => {
    return (
      <strong>提醒：</strong>
    )
  }

  render() {
    const { children } = this.props
    const { isShow, isResOk } = this.state
    if (isResOk) {
      return isShow ? children : this.renderTitleNotic()
    } else {
      return false
    }
  }
}
export default A

備注：

嘗試過，如果請求接口還未返回數據時，調用Loading組件，會存在第一次render為Loading組件，請求接口返回數據，更新數據后render為A||B組件 ；會導致Loading組件卸載的時候，在更新數據，造成內存泄漏問題。