React Native之this詳解
this引起的錯誤詳解
我們在學習React Native的過程中，肯定經常遇見過undefined is not an object這樣的問題吧，尤其是剛開始學習的時候，使用this.props或者this.setState的時候會報類似於如下錯誤：
接下來我們來分析以下到底是什麽原因造成的錯誤，
根據錯誤的提示，找到報錯的代碼，我們會發現：
報錯的都是this.props.?或者this.setState(?),都是出現在有this的地方
報錯的原因是沒有定義該對象，而我們都知道this代表的就是當前對象，又怎麽會出現未定義對象呢？那就只能說明是代表當前對象的this和此處this.props的this指代的不是同一個對象。
那麽我們就需要弄明白，什麽時候this指代的不是當前對象的this呢，接下裏我們來看一個Demo，首先，我們分三處分別使用this，看一下是什麽樣的結果，如下：
class RN_This extends Component { constructor(props) { super(props) this.state = { name: ‘VennyChen‘, age: 24, sex: ‘男‘ } } componentDidMount() { //第一處 // this.showStudentName() } render() { //第二處 this.showStudentName() return ( <View style={styles.container}> <Head onPress={this.showStudentName} text="this的第一種綁定方式"> </Head> </View> ) } showStudentName() { //第三處 //alert(this.state.name) } } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: ‘column‘, justifyContent: ‘center‘, alignItems: ‘center‘, } }) module.exports = RN_This
運行的結果是：
第一處：正常執行
第二處：正常執行
第三處：undefined is not an object
由此可以看出，只要我們不在render函數的返回組件中使用this.props或者this.setState，那麽this就作用於當前操作對象
於是就有人要問了，那我們如何在render函數的return中使用this.props或者this.setState呢？當然，就是接下來要講的，React Native中綁定this的方法：
綁定this的三種方法
方法一：
在構造方法constrctor中綁定，綁定方式如下：
this.函數名 = this.函數名.bind(this)完成代碼如下：
import React, {Component} from ‘react‘
import {AppRegistry, StyleSheet, Image, View, Text} from ‘react-native‘
import Head from ‘../widget/Head‘
class RN_This extends Component {
constructor(props) {
super(props)
this.state = {
name: ‘VennyChen‘,
age: 24,
sex: ‘男‘
}
//第一種this的綁定方式
this.showStudentName = this.showStudentName.bind(this)
}
render() {
return (
<View style={styles.container}>
<Head onPress={this.showStudentName} txt="this的第一種綁定方式"></Head>
</View>
)
}
showStudentName() {
alert(this.state.name)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: ‘column‘,
justifyContent: ‘center‘,
alignItems: ‘center‘,
}
})
module.exports = RN_This方法二：在Render函數的組件中直接綁定，綁定方法如下：
{this.函數名.bind(this)}完整代碼如下：
import React, {Component} from ‘react‘
import {AppRegistry, StyleSheet, Image, View, Text} from ‘react-native‘
import Head from ‘../widget/Head‘
class RN_This extends Component {
/*綁定this的三種實現方式*/
constructor(props) {
super(props)
this.state = {
name: ‘VennyChen‘,
age: 24,
sex: ‘男‘
}
}
render() {
return (
<View style={styles.container}>
{/*this的第二種綁定方式*/}
<Head onPress={this.showStudentAge.bind(this)} txt="this的第二種綁定方式"></Head>
</View>
)
}
showStudentAge() {
alert(this.state.age)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: ‘column‘,
justifyContent: ‘center‘,
alignItems: ‘center‘,
}
})
module.exports = RN_This方法三：使用箭頭函數，因為在ES6中，箭頭函數是自己的this值的，所以箭頭函數內的this值繼承自外圍作用域，因此，在箭頭函數中是可以直接使用this的，如下：
import React, {Component} from ‘react‘
import {AppRegistry, StyleSheet, Image, View, Text} from ‘react-native‘
import Head from ‘../widget/Head‘
class RN_This extends Component {
constructor(props) {
super(props)
this.state = {
name: ‘VennyChen‘,
age: 24,
sex: ‘男‘
}
}
render() {
return (
<View style={styles.container}>
<Head onPress={this.showStudentSex} txt="this的第三種綁定方式"></Head>
</View>
)
}
/* this的第三種綁定方式,定義箭頭函數*/
showStudentSex = () => {
alert(this.state.sex)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: ‘column‘,
justifyContent: ‘center‘,
alignItems: ‘center‘,
}
})
module.exports = RN_ThisReact Native之this詳解