React Native - 在按钮 onPress 中访问“this”会导致应用程序崩溃

Question

几天前我开始学习 React Native，但一直被这个看似简单的问题所困扰。

我有一个注册表单，我只是想在用户按下提交后将表单的值记录到控制台。问题是当我按下按钮时，应用程序会挂起大约一分钟然后崩溃。没有错误或日志，所以我不知道它为什么会崩溃，尽管我知道当我尝试在 onPress 函数中调用“this”时会发生这种情况。

这是我的问题的一个简单示例：

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

export default class Home extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
          <Button
            title="Submit"
            onPress={this.onPress}
          />
      </View>
    );
  }

  onPress = () => {
    console.log(this);
  }
}

运行此代码并按下按钮会导致我的应用崩溃。但是，将console.log(this) 更改为console.log('test') 可以防止应用崩溃。

我的两个问题是：

• 在 onPress 函数中获取对组件“this”的引用的正确方法是什么？
• 我的应用崩溃时如何查看日志/错误？

Answer 1

尝试记录this 可能会导致大量输出，甚至可能是周期性的。为什么需要打印整个对象？能不能缩小范围。您的 onPress 方法使用 Class Fields 语法正确绑定到 this。