Javascript 组件将挂载执行两次

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

---

您遇到的问题是，您的设置状态基于正在解决的承诺。在一个普通的

组件willmount

中，您设置状态，它更新状态，然后第一次调用render（）。在图片中引入异步api调用时，会发生以下情况：

componentWillMount

执行，进行API调用并创建承诺，当承诺等待解析时，代码继续执行，React对组件执行Render（）方法。在呈现承诺解决后的某个时刻，会调用setState，因为组件已经呈现，所以由于状态发生变化，它必须重新呈现

---

两者之间的主要区别在于：如果您只是在

组件willmount

中设置state，那么它将在渲染发生之前发生。如果将

setState

作为承诺的一部分进行解析，则会在组件渲染后发生，从而导致多次渲染

作为旁注，我倾向于避免在

componentWillMount

函数中设置状态，因为它不会触发重新渲染。相反，我使用

componentDidMount

函数来实现这一点。