componentWillMount 执行两次答案

【问题标题】：componentWillMount executing twicecomponentWillMount 执行两次
【发布时间】：2017-04-27 20:45:33
【问题描述】：

我在安装组件之前调用了一个 API，但我的代码调用了一个 API 两次。我的要求是在获取成功的 API 调用后显示年份数据（它将返回年份数据）。如果我在 componentWillMount 中使用 setState 函数，那么它不应该调用 render 方法，但在我的情况下，render 函数也会被调用多次。

  componentWillMount(){
        // Year api call
          var oauth=GetAuthToken()
        if(this.props.options.apiName === 'year__c' ){
          var access_token=oauth.then((data) => {
            var temp
            temp=GetYear(data.access_token)
            temp.then((obj) => {
              this.setState({
                year:obj
              })
            })
          })       
        }
    }

【问题讨论】：

作为旁注，我倾向于避免在componentWillMount 函数中设置状态，因为它不会触发重新渲染。相反，我为此使用 componentDidMount 函数。

标签： javascript api reactjs

【解决方案1】：

您遇到的问题是您的设置状态基于正在解决的承诺。在一个普通的componentWillMount你setState中，它会更新状态，然后第一次调用render()。当你在图片中引入异步 api 调用，那么会发生什么：

componentWillMount 被执行，API 调用并创建 Promise，而 Promise 等待被解析代码继续执行，React 执行组件上的 Render() 方法。在渲染 Promise 解决后的某个时间点，然后调用 setState 并且由于组件已经被渲染，那么由于状态的变化它必须重新渲染。

两者之间的主要区别是：如果您只是在componentWillMount 中使用setState，那么它将在渲染发生之前发生。如果您将 setState 作为 Promise 的一部分，则它会在组件渲染后发生，从而导致多次渲染。

【讨论】：