React firebase auth() setState 在 then() 内部不起作用答案

【问题标题】：React firebase auth() setState not working inside then()React firebase auth() setState 在 then() 内部不起作用
【发布时间】：2017-12-22 13:54:59
【问题描述】：

我从 firebase 文档登录了这个 twitter，我想保存 uid 状态，但它不起作用。知道这里发生了什么吗？

twitterSignin(provider) {

    var provider = new firebase.auth.TwitterAuthProvider();
    var getStoreID = this.props.storeId;

    firebase.auth().signInWithPopup(provider)
        .then(function (result) {
            var token = result.credential.accessToken;
            var user = result.user;

            var ref = firebase.database().ref(getStoreID);

            ref.once("value")
                .then(function (snapshot) {
                    var data = snapshot.val();

                    if (!data.owner) {
                        ref.set({
                            owner: result.user.uid
                        })
                    }

                    this.setState({
                        uid: result.user.uid
                    })

                });
        }).catch(function (error) {
            console.log(error.code)
            console.log(error.message)
        });
}

谢谢

固定：

    twitterSignin(provider) {

        var provider = new firebase.auth.TwitterAuthProvider();
        var getStoreID = this.props.storeId;
var that = this;

        firebase.auth().signInWithPopup(provider)
            .then(function (result) {
                var token = result.credential.accessToken;
                var user = result.user;

                var ref = firebase.database().ref(getStoreID);

                ref.once("value")
                    .then(function (snapshot) {
                        var data = snapshot.val();

                        if (!data.owner) {
                            ref.set({
                                owner: result.user.uid
                            })
                        }

                        that.setState({
                            uid: result.user.uid
                        })

                    });
            }).catch(function (error) {
                console.log(error.code)
                console.log(error.message)
            });
    }

【问题讨论】：

你有什么错误吗？

标签： javascript reactjs firebase firebase-realtime-database firebase-authentication

【解决方案1】：

问题是您试图从不同的范围访问setState。为了解决这个问题，您需要将回调绑定到实例。为此，您有两个选择，使用 bind，缓存父作用域 const me = this;，然后在回调中使用 me 或使用箭头函数。

twitterSignin(provider) {

  var provider = new firebase.auth.TwitterAuthProvider();
  var getStoreID = this.props.storeId;

  firebase.auth().signInWithPopup(provider)
    .then((result) => {
      var token = result.credential.accessToken;
      var user = result.user;

      var ref = firebase.database().ref(getStoreID);

      ref.once("value")
        .then((snapshot) => {
          var data = snapshot.val();

          if (!data.owner) {
            ref.set({
             owner: result.user.uid
            })
          }

          this.setState({
            uid: result.user.uid
          })

        });
  }).catch(function (error) {
    console.log(error.code)
    console.log(error.message)
  });
}

我会使用箭头函数。

箭头函数在外部范围内执行，在本例中为twitterSignin 的范围，这是您的反应组件，带有setState 的组件：)

【讨论】：