在使用 Firebase 进行身份验证后，无法访问 re-base syncState 中的状态答案

【问题标题】：Cannot access state in re-base syncState, after authentication with Firebase在使用 Firebase 进行身份验证后，无法访问 re-base syncState 中的状态
【发布时间】：2017-09-18 23:16:08
【问题描述】：

我有一个带有以下浅层数据库模型的 React 应用程序，连接到 Firebase：

{
  "users": {
    "userid1": {
      "Full name": "Patrick Bateman",
    },
  },
  "posts": {
    "userid1": {
      "post-1": {
        text: "Lorem ipsum",
        ...
      },
      "post-2": {
        text: "Cats sure are swell",
        ...
      },
    },
    "userid2": {
      ...
    }
  }
}

在 React 中，我使用 re-base 库的 syncState() 来获取初始内容并保持本地状态和 firebase 同步。在重新构建的文档和示例中，他们在componentDidMount 中使用syncState()。这是有道理的，但我不想同步所有的 firebase 帖子；只有那些属于用户的，所以我的直觉是做这样的事情：

componentDidMount() {
  this.refs = base.syncState(`posts/${this.state.uid}`, {
    context: this,
    state: 'posts',
  });
}

这里的问题是this.state.uid 在生命周期的这个阶段是null。

我的问题是：调用syncState时如何访问uid？

这是我的其余代码供参考，也显示身份验证：

init() {
  // I need the uid here!!!!!! ????
  console.log(this.state.uid); // null
  this.refs = base.syncState(`posts/${this.state.uid}`, {
    context: this,
    state: 'posts',
  });
}

componentDidMount() {
  this.unsubscribe = firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      window.localStorage.setItem(storageKey, user.uid);
      this.setState({
        uid: user.uid,
        user
      });
    } else {
      window.localStorage.removeItem(storageKey);
      this.setState({
        uid: null,
        user: null,
        posts: null,
      });
    }
  });

  // re-base firebase sync
  this.init();
}

componentWillUnmount() {
  base.removeBinding(this.ref);
  this.unsubscribe();
}

authenticate = (provider) => {
  if (provider === 'twitter') {
    provider = new firebase.auth.TwitterAuthProvider();
  } else if (provider === 'google') {
    provider = new firebase.auth.GoogleAuthProvider();
    provider.addScope('https://www.googleapis.com/auth/plus.login');
  }

  firebase.auth().signInWithPopup(provider).then((authData) => {
    // get the of the firebase.User instance
    const user = authData.user;
    // Set local storage to preserve login
    window.localStorage.setItem(storageKey, user.uid);
    // Set the state of the current user
    this.setState({
      uid: user.uid,
      user,
    });
  }).catch(function(error) {
    console.log(error);
  });
};

使用上面的代码，我的应用正确地创建了本地状态：

State
  posts: {
    post-1: {
      ...
    }
  }

但随后在 firebase 上，使用 null 用户谓词添加它们，因为 uid 不可用。

database: {
  posts: {
    null: {
      post-1: {
        ...
      }
    }
  }
}

【问题讨论】：

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

【解决方案1】：

您可以在状态设置后调用this.init()。 this.setState 有第二个参数是回调。这样您就可以确定uid 不会为空。

示例

this.setState({
  uid: user.uid,
  user
}, () => {
  this.init();
});

【讨论】：

做到了。谢谢！