javascript - Promise .then() 中的 setState (以及所有其他函数)未定义

Question

我正在使用从 Firebase 获取的数据创建一个 React 应用。

当我使用下面的函数删除记录时，我尝试重新加载页面以获取不包含已删除记录的更新 View

deleteWorkout(id, e) {
  e.preventDefault();
  fire.database().ref("athlete")
    .child(id).remove() // <-- This works

  // This does not work! 
  //Error: '_this4.getAthleteData' is undefined) 
  .then(() => this.getAthleteData().bind(this)) 
  .catch(e => console.log(e));

}

我已经定义了这个函数，所以我猜它是 Promise 中的一些范围问题？

  getAthleteData() {...}

尝试调用

this.setState({...})

也返回相同的错误。

Answer 1

有几个问题；

1)如果你想调用你的类的函数，你应该使用这个关键字。

2) 为了能够调用它，您的函数必须绑定(bind)到正确的位置。要解决这个问题，有几种方法。

1. 您可以使用如下所示的箭头函数，这将自动绑定(bind)其父函数。
2. 您可以在构造函数中绑定(bind) this 并重写您自己的方法:this.deleteWorkout = this.deleteWorkout.bind(this);
3. 您可以在调用该函数时将其提供给它。 (this.deleteWorkout.bind(this))()。如果您只需提供 onClick 事件的函数句柄(例如按钮)，则可以提供 this.deleteWorkout.bind(this)。

最后，下面显示的代码应该可以工作。

deleteWorkout = (id, e) => {
  e.preventDefault();
  fire.database().ref("athlete")
    .child(id).remove();
  .then(() => this.getAthleteData()) 
  .catch(e => console.log(e));
}