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

转载请标明出处:http://www.jb51.cc/article/p-obiovtsr-rd.html本文出自:【李东的博客】

最近在学习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,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,});

module.exports = HealthSQ;

最后来张实现的效果：

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