react native中由于undefined与null引发的血案

最近在进行react-native的相关开发，可能自己之前主要是做Android和后端PHP的工作(PHP也没有挑过大梁~)，对于JS可能掌握不太到位，属于初学者水平，所以犯了如下的一个错误：
当我的代码这么写的时候(this.state.datas.layouts我并没有进行赋值，所以它应该是个”空值”)：

// 构造
    constructor(props) { super(props); // 初始状态 this.state = { datas:{name:''},//没有特意说明layouts变量 };
    }

var listView = (this.state.datas.layouts === null ? <View></View> : 
        <FlatList
            horizontal={false}
            renderItem={this._renderItem}
            data={this.state.datas.layouts[0].children[0].children[0].selects}
            keyExtractor={this._extraUniqueKey}
        ></FlatList>);

在运行的时候报了如下错误：

undefined is not an object(evaluating 'this.state.datas.layouts[0]')

也就说，this.state.datas.layouts === null并没有按照我期望的为true，而是成为了false执行了后面初始化FlatList的操作。

而当我修改为如下代码，错误就消失了：

var lotteryListView = (this.state.datas.layouts == null ? <View></View> : 
        <FlatList
            horizontal={false}
            renderItem={this._renderItem}
            data={this.state.datas.layouts[0].children[0].children[0].selects}
            keyExtractor={this._extraUniqueKey}
        ></FlatList>);

或者

var lotteryListView = (this.state.datas.layouts === undefined ? <View></View> : 
        <FlatList
            horizontal={false}
            renderItem={this._renderItem}
            data={this.state.datas.layouts[0].children[0].children[0].selects}
            keyExtractor={this._extraUniqueKey}
        ></FlatList>);

也就是说，问题应该是出在undefined与null上，以及==和===。

说明

JavaScript有两个表示”无”的值：undefined和null。
undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。例如，变量被声明了，但没有赋值，那么就是undefined。null 表示一个值被定义了，但是它是空值。
==在比较的时候可以转换数据类型，===严格比较，只要类型不匹配就返回flase。
那么在我的错误里，this.state.datas.layouts并没有被定义，并且它是个空值，那么我可以使用==null或者===undefined;但是===null的话，它的类型还没有确定（还没有被定义和初始化），所以不能使用。

http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html
https://www.jianshu.com/p/959a82fd6ed7

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!