javascript – componentWillMount执行两次

2019-08-23 23:37:11 阅读：187 来源： 互联网

我在安装组件之前调用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中,你设置了State,它会更新状态,然后第一次调用render().当你在图片中引入异步api调用时,会发生什么：

执行componentWillMount,进行API调用并创建Promise,而Promise等待解析代码继续执行,React在组件上执行Render()方法.在渲染Promise之后的某个时刻,会调用setState,因为Component已经被渲染,所以由于状态的改变,它必须重新渲染.

两者之间的主要区别在于：如果只是在componentWillMount中设置了state,那么它将在渲染发生之前发生.如果将setState作为要解析的Promise的一部分,则会在组件渲染后发生,从而导致多次渲染.

标签：javascript,reactjs,api
来源： https://codeday.me/bug/20190823/1702112.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – componentWillMount执行两次