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

前端之家收集整理的这篇文章主要介绍了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

原文链接:https://www.f2er.com/react/301927.html

猜你在找的React相关文章