开发者社区> 请叫我东子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

React-Native中this的带给大家的困惑

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010046908/article/details/50812572 转载请标明出处:http://blog.
+关注继续查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010046908/article/details/50812572

转载请标明出处:http://blog.csdn.net/u010046908/article/details/50812572本文出自:【李东的博客】

最近在学习react-native时候,一直会遇到this.setState()或者this.props报如下的错误:

这里写图片描述

问题描述

这是什么原因导致的呢?当时都没有认真的分析该问题的发生点,一直让这个问题困扰我们好几天。
于是,我们想到this的函数是什么呢?估计大家都知道,this代表当前对象,但是this.setState() undefined is not an object错误,提示我们未知的对象,该句话的含义就是我们没有定义该对象。但是this就是当前对象,为什么还会出现如此问题?只有一种可能,就是当前引用的this和this.setState的this不是指向同一个对象,这样才会出想“undefined is not an object”这样的错误。下面用一个例子来简单说明一下:
该例子是一个点击按钮,发送请求获取数据后,更新Text值的例子。

问题的呈现

'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  ToastAndroid,
  View
} from 'react-native';


let format = 2;
let key = 'ad1d20bebafe0668502c8eea5ddd0333';
let cityname='苏州';
import NavButton from './app/util/NavButton';
import Util from './app/util/Util';
import API from './app/api/API';
/**
*健康社区
*/
class HealthSQ extends Component {

    constructor(props){
     super(props);
     this.state={city:'',
                 temperature:''
                };
    }
/**
*获取天气
*/
getWeather(){
   Util.get("http://v.juhe.cn/weather/index?format="+format+"&key="+key+"&cityname="+cityname,function  (ret) {
      this.setState({city:ret.result.today.city,
        temperature:ret.result.today.temperature});
   })
}

  render() {
    return (
      <View style={styles.container}>
         <NavButton
          onPress={this.getWeather.bind(this)}
          text="getfrom"
          style={styles.button1}  />
           <Text>{this.state.city}</Text>
            <Text>{this.state.temperature}</Text>
      </View>
    );
  }
  componentDidMount(){

  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#3CB371',
    height:40,
  },
  welcome: {

    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  button1:{
    width:200,
     // alignItems: 'flex-end',
    alignSelf: 'flex-end',
    // flexDirection:'row',
    marginBottom:200,
    justifyContent:'flex-end',
  },
});

module.exports = HealthSQ;

发送请求成功后,返回响应,从中解析到的数据来更新Text的值。

 this.setState({city:ret.result.today.city,
        temperature:ret.result.today.temperature});

这行代码就是将解析的值设置到state中,更新Text的值,于是直接这样写的话报错:this.setState() undefined is not an object。
这就意味当前的this和this.setState的this不一致。

再看一下发送请求代码:

/**
*获取天气
*/
getWeather(){
   Util.get("http://v.juhe.cn/weather/index?format="+format+"&key="+key+"&cityname="+cityname,function  (ret) {
      this.setState({city:ret.result.today.city,
        temperature:ret.result.today.temperature});
   })
}

其实上面代码中this.setState的this指向的是当前函数对象,因此引用就报错。

要想正确的引用当前类中this,需要将当期的this传入。

/**
*获取天气
*/
getWeather(){
  var thiz = this;
   Util.get("http://v.juhe.cn/weather/index?format="+format+"&key="+key+"&cityname="+cityname,function  (ret) {
     // alert(ret.resultcode+"---"+ret.result.today.city);
      // ret.result.today.city;
      thiz.setState({city:ret.result.today.city,
        temperature:ret.result.today.temperature});
   })
}

重新定义一个thiz,将当前this对象赋值给变量,让其设置 thiz.setState({city:ret.result.today.city,temperature:ret.result.today.temperature});
这样就解决问题。

整体的代码:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  ToastAndroid,
  View
} from 'react-native';


let format = 2;
let key = 'ad1d20bebafe0668502c8eea5ddd0333';
let cityname='苏州';
import NavButton from './app/util/NavButton';
import Util from './app/util/Util';
import API from './app/api/API';
/**
*健康社区
*/
class HealthSQ extends Component {

    constructor(props){
     super(props);
     this.state={city:'',
                 temperature:''
                };
    }
/**
*获取天气
*/
getWeather(){
  var thiz = this;
   Util.get("http://v.juhe.cn/weather/index?format="+format+"&key="+key+"&cityname="+cityname,function  (ret) {
     // alert(ret.resultcode+"---"+ret.result.today.city);
      // ret.result.today.city;
      thiz.setState({city:ret.result.today.city,
        temperature:ret.result.today.temperature});
   })
}

  render() {
    return (
      <View style={styles.container}>
         <NavButton
          onPress={this.getWeather.bind(this)}
          text="getfrom"
          style={styles.button1}  />
           <Text>{this.state.city}</Text>
            <Text>{this.state.temperature}</Text>
      </View>
    );
  }
  componentDidMount(){

  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#3CB371',
    height:40,
  },
  welcome: {

    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  button1:{
    width:200,
     // alignItems: 'flex-end',
    alignSelf: 'flex-end',
    // flexDirection:'row',
    marginBottom:200,
    justifyContent:'flex-end',
  },
});

module.exports = HealthSQ;

最后来张实现的效果:

这里写图片描述

今天就到这里,欢迎大家反馈意见,一起进步。加油。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《React Native移动开发实战》出版啦
对不起,我来晚了 首先要感谢支持和关注我的朋友,感谢人邮的赵老师,还有公司的领导和同事,他们在我写作的过程中给了很多有用的信息,也给了很多有用的建议,为本书的写作提供了很大帮助。感谢,再次感谢!!! 工作6年多以来,一直想写一本自己的书,一方面是对自己工作经历的一个总结,也是对希望写一本书给曾经的自己一个交代,毕竟30岁的人了,搞不了几年的技术了。
1739 0
《React Native移动开发实战》一一1.2 React Native的特点
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.2节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
2082 0
《React Native移动开发实战》一一3.9 小 结
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第3章,第3.9节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1367 0
《React Native移动开发实战》一一1.6 小 结
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.6节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
916 0
《React Native移动开发实战》一一1.5 小试牛刀——更改React Native项目源码
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.2节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1174 0
《React Native移动开发实战》一一2.6 小 结
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第2章,第2.6节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1106 0
《React Native移动开发实战》一一2.2 Git版本控制工具
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第2章,第2.2节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1861 0
《React Native移动开发实战》一一1.1 看透React Native
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.1节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1953 0
《React Native移动开发实战》一一2.4 React Native的Flexbox布局
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第2章,第2.4节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1042 0
126
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载