Bootstrap

《React-Native系列》17、 RN中this所引起的undefined is not an object错误

在我们编写RN代码的时候经常会出现一个错误,undefined is not an object(evaluating 'this.refs' ).

undefined is not an object错误,提示我们未知的对象,该句话的含义就是我们没有定义该对象。但是this就是当前对象,为什么还会出现如此问题?只有一种可能,就是当前引用的this和this.setState的this不是指向同一个对象,这样才会出想“undefined is not an object”这样的错误。

那么,今天我们来谈谈RN里的this,介绍几个特殊的case。

示例1:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <Dialog ref="dialog" callback={this.refuseCallback.bind(this)}/>//自定义一个Dialog组件,定义回调方法  
  2.   
  3.  //点击按钮,弹出Dialog组件  
  4.  refuse(){  
  5.    console.log('========= refuse');  
  6.    self = this;  
  7.    this.refs.dialog.show("确定要取消订单吗?");  
  8.  }  
  9.   
  10.  //回调  
  11.  refusePopCallback(obj){  
  12.    if(obj && obj.status){  
  13.     //这个地方为什么不能用this.fetchData???     此处的this代表什么呢?   
  14.      self.fetchData();  
  15.    }  
  16.  }  
  17.   
  18.  //Dialog组件的确定按钮,调用方法,此方法是一个和Native通信的方法,会跳转到另一个RN页面,并在方法中定义了一个回调<span style="font-family: Arial, Helvetica, sans-serif;">this.refusePopCallback</span>  
  19.  refuseCallback(){  
  20.    let refuseObj = { orderId:this.orderId };  
  21.    NativeModules.xxx.toRefuseOrder(refuseObj,this.refusePopCallback);  
  22.  }  

这个是最典型的this引用错误。在一个类中使用this.xxx,此时的this不一定代表当前对象,譬如这儿的回调方法。


示例2:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. render() {  
  2.   <TouchableOpacity style={styles.saveView} onPress={this.refuse.bind(this)} activeOpacity={0.7}>  
  3.     <Text style={styles.saveText}>拒单</Text>  
  4.   </TouchableOpacity>  
  5. });  

在render方法中, TouchableOpacity 组件的onPress方法bind(this),就是改变作用域,使得其方法作用于当前操作对象


示例3:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. //获取数据  
  2. import Util from './util/Util';  
  3. getData(){  
  4.    Util.get("http://xxx/index?query"+query,function(result) {  
  5.       this.setState({name:result.data.name});  
  6.    })  
  7. }  


 
譬如我们在通过Util工具包获取网络数据的时候,此时调用this.setState也会报错,此时的this指向的是当前函数对象Util,因此引用就报错。 


this所指的就是直至包含this指针的上层对象.


;