react native 报错:cannot read property 'length' of undefined
一、报错信息
根据信息,我们可以看出,这个报错信息和以前JS遇到的报错差不多。应该就是使用’.length’的对象没有定义或者没有值造成的。
二、逐步排错
1、先找到错误代码位置
//这两行代码的意思就是调用定义好的if_text_overflow()方法,尽心字符串的截取。let title = this.logic.if_text_overflow(this.state.data.list1.title);let device_name = this.logic.if_text_overflow(this.state.data.list1.device_name);
下面是对应的方法:
//截取标题栏目的字符串// 如果字数多于8个字,用省略号if_text_overflow(str){console.log('str:'+str);if(str.length>8){return str.substring(0,7) + '...';}else{return str;}}
2、这里基本可以确定是方法传入值的原因。也就是上述代码中的:
this.state.data.list1.title
用过RN的都知道,这部分的this.state.data是赋值部分。访问页面的时候,通过JS请求后台服务器,后台服务器给APP赋值。
3、打印调试
//这里是把最上面的代码给拆分开,一步步的打印,看看到底是哪里的问题//先打印title的值let title = this.state.data.list1.title;console.log("title的值:"+title);//再打印device_name的值let device_name = this.state.data.list1.device_name;console.log("device_name的值:"+device_name);//哪个有值取哪个let device = device_name===''?title:device_name;console.log("最终的设备名字:"+device);let name = this.logic.if_text_overflow(device);
打印效果如下:
这里发现,我们打印出来的值都是undefined。这也难怪会报错了、但是在debug的后半部分,又发现了其他内容:
(1)这里看到,在上面打印为undefined之后。APP报错
(2)APP报错之后,程序跑到我们请求服务器的部分,请求服务器
(3)请求服务器成功,此时又走一遍我们渲染打印的地方。
(4)此时发现打印出来的值已经正常了。
三、错误原因
1、原来,这种错误和RN的渲染顺序有关。RN在渲染页面的时候,有限读取注册组件以及其他组件,之后,RN会读取我们在constructor(p)中的值,然后开始渲染render组件
如图:
2、也就是说,我们需要赋给我们需要的这个值初始值,保证先让基本的组件加载完毕,然后程序请求服务器,这个时候,我们的程序就能正常运行了。
//就像这里,给初始的字段,title和device_name初始值,即可data: {list1: {'title':"",'device_name':"",},list2: [],},
这里需要区分下JS中的[]代表数组。小括号{}代表对象。
3、修改之后再次访问APP,无报错信息。
我这里主要的错误是没有搞清楚RN渲染页面的顺序,一直很奇怪,明明进入页面就会访问服务器,给字段赋值,没道理会显示undefined的。后面才知道,RN是先读取基本页面配置,后访问服务器,然后渲染页面的。。
我这里对RN的一些基本原理也不是很清楚。这里记录一下。如果有什么错误的地方,请不吝赐教,谢谢。一起学习!
end
react native 报错:cannot read property 'length' of undefined相关推荐
- DateTimePicker 日期时间选择器报错 Cannot read property ‘getHours‘ of undefined, 无法选中`[__ob_: observer__]`时做判断
我在一次开发中遇到了这个情况:使用DateTimePicker 日期时间选择器,出现无法选中, 报错 Cannot read property 'getHours' of undefined, 这个原 ...
- vue 报错 Cannot read property ‘__ob__‘ of undefined的解决方法
vue 报错 Cannot read property '__ob__' of undefined的解决方法 参考文章: (1)vue 报错 Cannot read property '__ob__' ...
- 事件监听一直报错Cannot set property 'display' of undefined
为什么80%的码农都做不了架构师?>>> css ↓ .wechatBtn {position: relative;} .wechat {position: absolute; ...
- Vue开启Gzip打包异常:webpack打包报错Cannot read property ‘emit‘ of undefined
Vue开启Gzip打包异常:webpack打包报错Cannot read property 'emit' of undefined 相关代码 const CompressionPlugin = req ...
- vue echarts使用map地图 引入china.js报错Cannot read property ‘echarts’ of undefined
下载china.js导入项目中引入,会报错Cannot read property 'echarts' of undefined import Echarts from "echarts&q ...
- uniapp 小程序报错 Cannot read property ‘forceUpdate‘ of undefined
uniapp 小程序报错 Cannot read property 'forceUpdate' of undefined 1.问题: 解决:配置小程序的ID manifest.json的文件
- js报错- cannot set property xxx of undefined
case1 报错代码 quizList[index] = currentQuiz; quizList[index].learningItem = item; 报错内容 Cannot read prop ...
- react native报错:Expected a component class,got[object object]
正在写RN的视图部分,突然模拟器报错:Expected a component class,got[object object].找也找不到原因.后来才发现是自己粗心大意造成的. 错误代码: < ...
- 解决React Native报错:Error:Found unexpected optical bounds (red pixel)
问题背景 同样是在升级 gradle plugin V2.2.3 --> gradle plugin V3.0.1后,运行至打包APK期间报错: Error:found unexpected o ...
最新文章
- 一文了解动态场景中的SLAM的研究现状
- ViewHolder VS HolderView ?
- flink读不到kafka数据问题
- Hadoop系列(三)MapReduce Job的几种提交运行模式
- android判断主线程_android中从子线程切换到主线程,但是显得代码很臃肿,请教大牛是怎么自定义的?...
- VS2013在Release情况下使用vector有时候会崩溃的一个可能原因
- Notepad设置sql语法高亮
- java 网格布局管理器,Java使用网格组布局管理器
- 转:gcc编译C++程序
- 什么是网络基础设施?
- VisualSVN 破解方法
- C语言_99 乘法表
- 域名管理系统DNS(Domain Name System)
- vite 预编译实现
- 面试常问的16个C语言问题,你能答上来几个?
- 雷曼另类“死因”:巴菲特漏看求救短信
- SpringbootApi接口学习笔记
- 子组件向父组件传递数据_如何将元素引用向下传递到角度的组件树中
- 综述丨视频超分辨率研究方法
- 面向对象编程及其三大特征(JAVA)
热门文章
- php 的ob start,php ob_start()函数详解
- mysql简单概述_MySQL入门很简单: 1 数据库概述
- ubuntu16.04 terminal无法正常运行
- No module named 'dlframework.common.utils.local'
- Async和Await如何简化异步编程几个实例
- Downsample 平移不变性
- web直播方案总结:
- 分割开源资料整理segmentation
- 本科遥感考研跨计算机专业好吗,遥感专业考研选择哪些学?哪个学校比较好
- networkx中求解平均度_机器学习之统计学二(分位数、平均数)