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_This
