《React-Native系列》17、 RN中this所引起的undefined is not an object错误
2016-12-18 17:05
501 查看
在我们编写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
<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
plain copy
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
plain copy
//获取数据
import Util from './util/Util';
getData(){
Util.get("http://xxx/index?query"+query,function(result) {
this.setState({name:result.data.name});
})
}
譬如我们在通过Util工具包获取网络数据的时候,此时调用this.setState也会报错,此时的this指向的是当前函数对象Util,因此引用就报错。
this所指的就是直至包含this指针的上层对象.
undefined is not an object错误,提示我们未知的对象,该句话的含义就是我们没有定义该对象。但是this就是当前对象,为什么还会出现如此问题?只有一种可能,就是当前引用的this和this.setState的this不是指向同一个对象,这样才会出想“undefined is not an object”这样的错误。
那么,今天我们来谈谈RN里的this,介绍几个特殊的case。
示例1:
[javascript] view
plain copy
<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
plain copy
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
plain copy
//获取数据
import Util from './util/Util';
getData(){
Util.get("http://xxx/index?query"+query,function(result) {
this.setState({name:result.data.name});
})
}
譬如我们在通过Util工具包获取网络数据的时候,此时调用this.setState也会报错,此时的this指向的是当前函数对象Util,因此引用就报错。
this所指的就是直至包含this指针的上层对象.
相关文章推荐
- 《React-Native系列》17、 RN中this所引起的undefined is not an object错误
- 《React-Native系列》28、 RN之AsyncStorage
- RN学习系列---Windows下安装搭建React-Native环境
- 《React-Native系列》16、 RN组件之ListView
- 《React-Native系列》RN组件之Text和TextInput以及注意要点
- 《React-Native系列》28、 RN之AsyncStorage
- 《React-Native系列》 RN学习之NodeJS
- 《React-Native系列》18、 RN之定时器Timer
- 《React-Native系列》16、 RN组件之ListView
- 《React-Native系列》11、 图解RN布局之FlexBox,三分钟上手写RN界面
- 《React-Native系列》3、RN与native交互之Callback、Promise
- 《React-Native系列》21、 解决RN在Android下不支持gif问题
- 《React-Native系列》30、 RN组件间通信
- 《React-Native系列》16、 RN组件之ListView
- RN(react native)入坑指南-05,使用图标字体Fontawesome
- Android 在 Fragment 中集成 React-Native(RN)步骤
- React Native系列之flexbox布局详解
- 【原】React Native踩坑系列之-安卓真机无法打开控制菜单
- RN-reactNative视频0-50集
- React-Native系列Android——通信数据模型分析