javascript - 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

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

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

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