如何使用Firebase用户数据设置state?

时间:2017-11-26 22:45:55

标签: reactjs firebase firebase-realtime-database this

下面的React代码是一个包含两个状态项的组件 - 用户和许可。两者都是空字符串,在用户登录时会发生变化。

在React的compoentDidMount方法中使用Firebase的onAuthStateChanged方法非常适合用户信息。用户状态更改没有问题。但在这些方法中,我还将数据库称为当前用户的许可证。数据被提取没有问题,但我一直收到一个错误,说setState是未定义的。

我将bind(this)添加到setState并且没有更改任何内容。同样的错误。

我觉得这是“this”关键字的一个问题,但我无法确切地知道它是什么。

这是代码......

class App extends Component {
  constructor() {
  super();
  this.state = {
    user: '',
    license: ''
  };
}

componentDidMount() {

  auth.onAuthStateChanged(user => {
    if(user){

      this.setState({user});
      let userId = auth.currentUser.uid;

      firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) {
        var license = (snapshot.val() && snapshot.val().license);

        this.setState({license});
      });

    }else{
      console.log('no user');
    }
  });
}

1 个答案:

答案 0 :(得分:2)

这是'this'对象的经典范围问题。你必须将'this'绑定到这样的函数:

firebase.database().ref('/users/' + 
  userId).once('value').then(function(snapshot) {
    var license = (snapshot.val() && snapshot.val().license);

    this.setState({license});
  }.bind(this);