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组件卸载的时候，在更新数据，造成内存泄漏问题。