React在componentWillMount中请求接口数据结束后再执行render
时间:2019-03-21
本文章向大家介绍React在componentWillMount中请求接口数据结束后再执行render,主要包括React在componentWillMount中请求接口数据结束后再执行render使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.在getInitialState中初始化isloading,初始值false
1 getInitialState() { 2 return { 3 editionid: '', 4 isloading:false 5 } 6 }
2.
解决方法:
增加一个加载状态,默认为 false,调用 componentWillMount() 时,设置为 true,当这个加载状态是 true 时,暂不渲染,当回调函数执行完毕后,设置为 false,此时再调用 render();
1 componentWillMount() { 2 //获取当前请求的域名地址 3 this.setState({isLoading: true}) 4 this.getShopId(); 5 }, 6 7 8 getShopId(){ 9 this.get({url:"Api/lists/module/shops/key/dac509bd90a82719a3569291e12c24a6f1af4bac/id/8", 10 }).then((res)=> { 11 console.log("res",res) 12 if(res.error_code==0){ 13 let editionid = res.result[0].editionid 14 if(editionid==1) { 15 this.handleClickVideo('', videoDataInit2[0]); 16 this.setState({videoData:videoData1,videoDataFlag:true,rongqiuPic:rongqiuWz,editionid:editionid}) 17 }else if(editionid==2){ 18 this.handleClickVideo('', videoDataInit[0]); 19 this.setState({videoData:videoData2,videoDataFlag:false,rongqiuPic:rongqiu,editionid:editionid}) 20 }else{ 21 this.handleClickVideo('', videoDataInit[0]); 22 this.setState({videoData:videoData2,videoDataFlag:false,rongqiuPic:rongqiu,editionid:editionid}) 23 } 24 } 25 this.setState({isLoading: false}) 26 }); 27 },
3.最后对render进行处理
1 render() { 2 let {isLoading} = this.state 3 if (isLoading) { 4 return <p>isLoading...</p> 5 } 6 return ( 7 <div>要显示的部分</div> 8 ) 9 }
- TensorFlow从0到1丨第2篇:TensorFlow核心编程
- AngularJS中的按需加载ocLazyLoad
- AngularJS driective 封装 自动滚动插件
- java类过滤器,防止页面SQL注入
- Web项目添加Maven支持
- Jquery 获取第一个子元素
- Dropwizard框架入门
- Java 解析Excel文件为JSON
- SQL语句大小写是否区分的问题,批量修改整个数据库所有表所有字段大小写
- CentOS 6.5 安装nginx 1.6.3
- C#创建数字证书并导出为pfx,并使用pfx进行非对称加解密
- MyBatis两张表字段名相同产生的问题
- mongo 3.0 备份和还原数据库 ,及too many positional arguments错误
- AngularJs HTTP响应拦截器实现登陆、权限校验
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法