componentWillMount执行两次

Question

我在挂载组件之前调用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
              })
            })
          })       
        }
    }

Answer 1

你遇到的问题是，你的设置状态基于一个正在解决的承诺。在普通的渲染中，它会更新状态，然后第一次调用componentWillMount ()。当您在图片中引入异步api调用时，将会发生以下情况：

React执行componentWillMount，进行API调用并创建Promise，同时Promise等待解析代码继续执行，React对组件执行Render()方法。在呈现Promise被解决后的某个时刻，setState被调用，由于组件已经被呈现，因此由于状态的改变，它将不得不重新呈现。

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