Question

React Native：未定义不是一个对象

2017-11-12

7258

reactjs react-native expo

我目前正在学习 React Native。

我刚刚构建了一个非常简单的应用程序来测试按钮组件。

当我单击按钮组件时，控制台日志按预期打印。但是在打印出控制台日志后，它会弹出以下错误。

**undefined is not an object (evaluating '_this2.btnPress().bind')**

我不确定出了什么问题？

有人可以告诉我我做错了什么吗？

 import React from 'react';
    import { StyleSheet, Text, View, Button } from 'react-native';

    export default class App extends React.Component {

     btnPress() {
       console.log("Fn Button pressed");
     }

      render() {
        return (
          <View style={styles.container}>
            <Button title="this is a test"
              onPress={()=> this.btnPress().bind(this)} />
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });

Answer 1

您正在调用函数，而不是通过 bind 传递引用。
放开 () 。
并且您不应该用箭头函数包装它，因为 bind 已经返回了一个新的函数实例

onPress={this.btnPress.bind(this)} />

顺便说一句，这将在每次渲染时返回并创建一个函数实例，您应该在 constructor 中执行一次（仅运行一次）：

export default class App extends React.Component {
    constructor(props){
        super(props);
        this.btnPress = this.btnPress.bind(this);
    }
     btnPress() {
       console.log("Fn Button pressed");
     }

      render() {
        return (
          <View style={styles.container}>
            <Button title="this is a test"
              onPress={this.btnPress} />
          </View>
        );
      }
    }

或者使用对 this 使用词法上下文的箭头函数：

export default class App extends React.Component {

     btnPress = () => {
       console.log("Fn Button pressed");
     }

      render() {
        return (
          <View style={styles.container}>
            <Button title="this is a test"
              onPress={this.btnPress} />
          </View>
        );
      }
    }