React在componentWillMount中请求接口数据结束后再执行render

时间:2023-03-09 15:32:34
React在componentWillMount中请求接口数据结束后再执行render

1.在getInitialState中初始化isloading,初始值false

 getInitialState() {
return {
editionid: '',
isloading:false
}
}

2.

解决方法:
增加一个加载状态,默认为 false,调用 componentWillMount() 时,设置为 true,当这个加载状态是 true 时,暂不渲染,当回调函数执行完毕后,设置为 false,此时再调用 render();
     componentWillMount() {
//获取当前请求的域名地址
this.setState({isLoading: true})
this.getShopId();
}, getShopId(){
this.get({url:"Api/lists/module/shops/key/dac509bd90a82719a3569291e12c24a6f1af4bac/id/8",
}).then((res)=> {
console.log("res",res)
if(res.error_code==0){
let editionid = res.result[0].editionid
if(editionid==1) {
this.handleClickVideo('', videoDataInit2[0]);
this.setState({videoData:videoData1,videoDataFlag:true,rongqiuPic:rongqiuWz,editionid:editionid})
}else if(editionid==2){
this.handleClickVideo('', videoDataInit[0]);
this.setState({videoData:videoData2,videoDataFlag:false,rongqiuPic:rongqiu,editionid:editionid})
}else{
this.handleClickVideo('', videoDataInit[0]);
this.setState({videoData:videoData2,videoDataFlag:false,rongqiuPic:rongqiu,editionid:editionid})
}
}
this.setState({isLoading: false})
});
},

3.最后对render进行处理

 render() {
  let {isLoading} = this.state
  if (isLoading) {
    return <p>isLoading...</p>
  }
  return (
    <div>要显示的部分</div>
  )
}