转载请标明出处: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;
最后来张实现的效果:
今天就到这里,欢迎大家反馈意见,一起进步。加油。