我在安装组件之前调用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
})
})
})
}
}
答案 0 :(得分:6)
您遇到的问题是您的设置状态基于正在解决的承诺。在正常的componentWillMount
setState中,它会更新状态,然后第一次调用render()。当你在图片中引入异步api调用时,会发生什么:
componentWillMount
,进行API调用并创建Promise,而Promise等待解析代码继续执行,React对组件执行Render()方法。在渲染Promise之后的某个时刻,会调用setState,因为Component已经被渲染,所以由于状态的改变,它必须重新渲染。
两者之间的主要区别在于:如果setState
中只有componentWillMount
,那么它将在渲染发生之前发生。如果您将setState
作为Promise的一部分进行解析,则会在组件渲染后发生,从而导致多次渲染。