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

╰+攻爆jí腚メ 2022-05-31 09:46 125阅读 0赞

最近在进行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][http_www.ruanyifeng.com_blog_2014_03_undefined-vs-null.html]  
> [https://www.jianshu.com/p/959a82fd6ed7][https_www.jianshu.com_p_959a82fd6ed7]

[http_www.ruanyifeng.com_blog_2014_03_undefined-vs-null.html]: http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html
[https_www.jianshu.com_p_959a82fd6ed7]: https://www.jianshu.com/p/959a82fd6ed7