Question

我很难理解似乎是一个简单的错误。当我调用在我的反应组件AlarmList上定义的方法addNewAlarm时，该方法调用this.showAlarms（）。我认为这不会导致问题，但我收到错误undefined is not a function。这似乎应该非常简单，因为这就是你在javascript中调用类方法的方式。我做错了什么？

import React, { Component } from 'react';
...

export default class AlarmList extends React.Component {
  addNewAlarm() {
    this.showAlarms();
  }
  showAlarms() {
    alert('showing alarms');
  }
render() {
  return (
    <View>
      <Button
        title="Add An Alarm"
        onPress={this.addNewAlarm}
      />
    </View>
  );
 }
}

Answer 1

您需要将函数声明更改为

addNewAlarm = () => {
   this.showAlarms();
}
showAlarms = () => {
   alert('showing alarms');
}

或者在

之类的构造函数中绑定它

constructor(props) {
   super(props);
   this.addNewAlarm = this.addNewAlarm.bind(this);
   this.showAlarms = this.showAlarms.bind(this);
   ...
}

希望这有帮助！

Answer 2

尝试绑定它

<View>
      <Button
        title="Add An Alarm"
        onPress={this.addNewAlarm.bind(this)}
      />
 </View>

Answer 3

这是因为此上下文中的此是方法而不是类，并且您的方法addNewAlarm（）中没有定义此类方法。这是词汇 this 的更普遍的问题。

你可以通过三种方式解决它（你应该采用第一种方式，如果你不喜欢它，那么你应该选择第二种方式）

转换声明

addNewAlarm（）{ this.showAlarms（）; }

到

addNewAlarm = () => {
    this.showAlarms();
  }

让宣言为

addNewAlarm（）{ this.showAlarms（）; }

但是在你的类中写一个构造函数

constructor(props) {
  super(props)
  this.addNewAlarm = this.addNewAlarm.bind(this)
}

（不推荐）在调用此类
时绑定addNewAlarm
onPress = {this.addNewAlarm.bind（本）}

在React Native中调用方法

3 个答案: