Question

处理此项目并尝试调用firebase实时数据库信息，然后在调用它后设置状态，以便可以在渲染器中使用它。目前这是我的代码，但其setState是未知的，我试图阅读有关此问题的其他解决方案，但不理解，将不胜感激。谢谢。

  componentDidMount(){
    this._getLocationAsync();
    firebase.database().ref('pets/').once('value', function (snapshot) {
        this.setState({ testdid: snapshot.val().name })
     });
  }

Answer 1

简短的答案是因为您的Firebase回调中的this是指该函数本身，而不是组件。使用箭头功能应该将this正确地绑定到该组件应该可以解决您的错误：

firebase.database().ref('pets/').once('value', (snapshot) => {
    this.setState({ testdid: snapshot.val().name })
 });

在JS的 scope 上进行阅读，尤其是关于this关键字的阅读。知道绝对重要，因为它有时会有一些奇怪的行为。

Answer 2

您的回调是在不同的上下文中进行的，您需要执行以下操作：

 componentDidMount(){
    this._getLocationAsync();
    firebase.database().ref('pets/').once('value', function (snapshot) {
        this.setState({ testdid: snapshot.val().name })
     }.bind(this));  // bind to current context
  }

或使用我更喜欢的ES6


componentDidMount(){
    this._getLocationAsync();
    firebase.database().ref('pets/').once('value', snapshot => { // Using Fat Arrow
        this.setState({ testdid: snapshot.val().name })
     }); 
  }

如何在componentDidMount中设置状态？

2 个答案: