React不调用函数

Question

  teste(){
   console.log('a');
  }

 componentDidMount() {
   // firebase things?
   firebase.database().ref('Matheus').on('value', function(snapshot){
     itens = snapshot.val();
     itens.forEach((data) => {
     firebase.storage().ref(data).getDownloadURL().then(this.teste);
   });
 });

代码有效。只能调用函数 this.teste

Answer 1

在内部函数中运行时，context of this已更改。
可以将this存储在临时变量中以在函数内部使用它：

 componentDidMount() {
    const that = this; // holding the context for this
   // firebase things?
   firebase.database().ref('Matheus').on('value', function(snapshot){
     itens = snapshot.val();
     itens.forEach((data) => {
     firebase.storage().ref(data).getDownloadURL().then(that.teste); // using that instead of this
   });
 });

或使用arrow function，它将为this使用词法上下文：

 componentDidMount() {
    const that = this; // holding the context for this
   // firebase things?
   firebase.database().ref('Matheus').on('value', (snapshot) => { // arrow function instead
     itens = snapshot.val();
     itens.forEach((data) => {
     firebase.storage().ref(data).getDownloadURL().then(that.teste);
   });
 });