[置顶] 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