React Native之this详解

时间 2019-11-09

标签 react native 详解栏目 React 繁體版

原文原文链接

this引发的错误详解

咱们在学习React Native的过程当中，确定常常碰见过undefined is not an object这样的问题吧，尤为是刚开始学习的时候，使用this.props或者this.setState的时候会报相似于以下错误：react

接下来咱们来分析如下究竟是什么缘由形成的错误，
根据错误的提示，找到报错的代码，咱们会发现：
报错的都是this.props.?或者this.setState(?),都是出如今有this的地方react-native

报错的缘由是没有定义该对象，而咱们都知道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

运行的结果是：flex

第一处：正常执行
第二处：正常执行
第三处：undefined is not an objectthis

由此能够看出，只要咱们不在render函数的返回组件中使用this.props或者this.setState，那么this就做用于当前操做对象code

因而就有人要问了，那咱们如何在render函数的return中使用this.props或者this.setState呢？固然，就是接下来要讲的，React Native中绑定this的方法：component

绑定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