Question

我正在创建一个React应用程序，其中包含从Firebase获取的数据。

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

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）为了能够调用此功能，您的功能必须绑定到正确的位置。要解决这个问题，有几种方法。

您可以使用如下所示的箭头功能，这将使其父项自动绑定。
您可以在构造函数中绑定它并使用：this.deleteWorkout = this.deleteWorkout.bind(this);
您可以在调用该函数时向其提供此功能。 (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));
}

Answer 2

似乎您的函数未绑定到带有bind或fat arrow（=＆gt;）的上下文。

Answer 3

你认为不应该像这样调用getAthleteData（）。getAthleteData（）

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()) //instead of getAthleteData()
      .catch(e => console.log(e));
    }

我可能错了

promise.then（）中的setState（以及所有其他函数）是未定义的

3 个答案: