《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不是指

barnettyj

11867人浏览 · 2016-12-18 17:05:24

barnettyj · 2016-12-18 17:05:24 发布

在我们编写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 plaincopy
   
<Dialog ref="dialog" callback={this.refuseCallback.bind(this)}/>//自定义一个Dialog组件，定义回调方法  
  
 //点击按钮，弹出Dialog组件  
 refuse(){  
   console.log('========= refuse');  
   self = this;  
   this.refs.dialog.show("确定要取消订单吗?");  
 }  
  
 //回调  
 refusePopCallback(obj){  
   if(obj && obj.status){  
    //这个地方为什么不能用this.fetchData???     此处的this代表什么呢？   
     self.fetchData();  
   }  
 }  
  
 //Dialog组件的确定按钮，调用方法，此方法是一个和Native通信的方法，会跳转到另一个RN页面，并在方法中定义了一个回调<span style="font-family: Arial, Helvetica, sans-serif;">this.refusePopCallback</span>  
 refuseCallback(){  
   let refuseObj = { orderId:this.orderId };  
   NativeModules.xxx.toRefuseOrder(refuseObj,this.refusePopCallback);  
 }  

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

示例2：

[javascript]view plaincopy
   
render() {  
  <TouchableOpacity style={styles.saveView} onPress={this.refuse.bind(this)} activeOpacity={0.7}>  
    <Text style={styles.saveText}>拒单</Text>  
  </TouchableOpacity>  
});  

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

示例3：

[javascript]view plaincopy
   
//获取数据  
import Util from './util/Util';  
getData(){  
   Util.get("http://xxx/index?query"+query,function(result) {  
      this.setState({name:result.data.name});  
   })  
}  