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