轉載請標明出處: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';
importReact, {
AppRegistry,
Component,
StyleSheet,
Text,
ToastAndroid,
View
} from'react-native';
let format =2;
let key ='ad1d20bebafe0668502c8eea5ddd0333';
let cityname='蘇州';
importNavButton from'./app/util/NavButton';
importUtil from'./app/util/Util';
importAPI from'./app/api/API';
/**
*健康社區
*/
classHealthSQextendsComponent{
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(
onPress={this.getWeather.bind(this)}
text="getfrom"
style={styles.button1}/>
{this.state.city}
{this.state.temperature}
);
}
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';
importReact, {
AppRegistry,
Component,
StyleSheet,
Text,
ToastAndroid,
View
} from'react-native';
let format =2;
let key ='ad1d20bebafe0668502c8eea5ddd0333';
let cityname='蘇州';
importNavButton from'./app/util/NavButton';
importUtil from'./app/util/Util';
importAPI from'./app/api/API';
/**
*健康社區
*/
classHealthSQextendsComponent{
constructor(props){
super(props);
this.state={city:'',
temperature:''
};
}
/**
*獲取天氣
*/
getWeather(){
varthiz =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(
onPress={this.getWeather.bind(this)}
text="getfrom"
style={styles.button1}/>
{this.state.city}
{this.state.temperature}
);
}
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;
最后來張實現的效果：
今天就到這里，歡迎大家反饋意見，一起進步。加油。
