在我们编写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:
- <Dialog ref="dialog" callback={this.refuseCallback.bind(this)}/>
-
-
- refuse(){
- console.log('========= refuse');
- self = this;
- this.refs.dialog.show("确定要取消订单吗?");
- }
-
-
- refusePopCallback(obj){
- if(obj && obj.status){
-
- self.fetchData();
- }
- }
-
-
- refuseCallback(){
- let refuseObj = { orderId:this.orderId };
- NativeModules.xxx.toRefuseOrder(refuseObj,this.refusePopCallback);
- }
这个是最典型的this引用错误。在一个类中使用this.xxx,此时的this不一定代表当前对象,譬如这儿的回调方法。
示例2:
- 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:
-
- 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指针的上层对象.