Javascript 在AuthStateChanged上反应本机firebase

在以firebase为后端的react native应用程序中，我的初始登录屏幕如下： （react navigation的navigate函数将作为第一个参数传递的屏幕呈现为props.navigation.params.state作为该屏幕的第二个参数）

类登录屏幕扩展组件{
构造函数（）{
此.state={
当前用户：{}，
电子邮件：空，
psw:null
...
异步登录（电子邮件、通行证）{
试一试{
等待firebaseApp.auth（）
.使用电子邮件和密码登录（电子邮件、密码）
}捕获（错误）{
警报（error.toString（））
}
}
listenForAuth（）{
const{navigation}=this.props
this.unsubscribe=firebase.auth（）.onAuthStateChanged（用户=>{
如果（用户）{
这是我的国家({
当前用户：{
id:user.uid
}
})
navigation.navigate（'MainApp'，{currentUser:this.state.currentUser}）
}否则{
这是我的国家({
加载：错误
})
}
})
}
组件willmount（）{
this.listenForAuth（）
}
render（）{
...
this.logIn（this.state.email，this.state.psw）
...

以及作为react导航选项卡Navigator的MainApp组件，屏幕“配置文件”如下所示：

class Profile extends Component {

    constructor(props) {
        super(props)
        const { currentUser } = this.props.navigation.state.params
        this.userRef = firebaseApp.database().ref( 'users/' + currentUser.id )
        this.postsRef = firebaseApp.database().ref( 'users/' + currentUser.id + '/myposts' )
        this.state = {
            currentUser: {},
            refreshing: false,
            postsDataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2,
            })
        }
    ...
    listenForUser(usersRef) {
       usersRef.on('value', snap => {
          this.setState({
            currentUser: {
              user: snap.val().user,
              photo: snap.val().photo,
              email: snap.val().email,
              id: snap.val().id
           }
         })
       })

  listenForPosts(postsRef) {
  postsRef.on('value', snap => {
    var posts = []
    snap.forEach( trip => {
      firebaseApp.database().ref( 'posts/' + posts.key ).on('value', child => {
          posts.push({
            title: child.val().title,
            own: child.val().own,
            _key: child.key
          })
       })
    })
    this.setState({
      postsDataSource: this.state.postsDataSource.cloneWithRows(posts)
    })
   })
  }

  componentDidMount() {
     this.listenForUser(this.userRef)
     this.listenForPosts(this.postsRef)
  }

  _onRefresh() {
     this.setState({ refreshing: true })
     this.listenForPosts(this.postsRef)
     this.setState({ refreshing: false })
  }
  ...
  render() {
    ...
    <Text>{this.state.currentUser.user}</Text>
    ...
    <ListView dataSource={this.state.postsDataSource} 
              refreshControl={
                 <RefreshControl
                    refreshing={this.state.refreshing}
                    onRefresh={this._onRefresh.bind(this)}
                 />}
    ...

类配置文件扩展组件{
建造师（道具）{
超级（道具）
const{currentUser}=this.props.navigation.state.params
this.userRef=firebaseApp.database（）.ref（'users/'+currentUser.id）
this.postsRef=firebaseApp.database（）
此.state={
当前用户：{}，
刷新：错，
postsDataSource:新建ListView.DataSource({
行已更改：（行1，行2）=>行1！==行2，
})
}
...
listenForUser（usersRef）{
usersRef.on（'value'，snap=>{
这是我的国家({
当前用户：{
用户：snap.val（）.user，
照片：snap.val（）.photo，
电子邮件：snap.val（）.email，
id:snap.val（）.id
}
})
})
listenForPosts（postsRef）{
postsRef.on（'value'，snap=>{
var posts=[]
snap.forEach（trip=>{
firebaseApp.database（）.ref（'posts/'+posts.key）.on（'value'，child=>{
推({
标题：child.val（）.title，
own:child.val（）.own，
_关键字：child.key
})
})
})
这是我的国家({
postsDataSource:this.state.postsDataSource.cloneWithRows（posts）
})
})
}
componentDidMount（）{
this.listenForUser（this.userRef）
this.listenForPosts（this.postsRef）
}
_onRefresh（）{
this.setState（{刷新：true}）
this.listenForPosts（this.postsRef）
this.setState（{刷新：false}）
}
...
render（）{
...
{this.state.currentUser.user}
...
问题是，加载onAuthStateChanged时，currentUser仍然为null。但是，如果您等待一段时间后再尝试（例如，相同的代码，但在另一个屏幕中），一切都会正常工作。这就是为什么您第二次尝试时没有出错的原因

对于旁路，我使用了setInterval函数——它将自己执行，直到检索到currentUser对象

let renderAction = setInterval(() => {
        if ( firebase.auth().currentUser !== null ) {
            clearInterval(renderAction);
            let user = firebase.auth().currentUser;
            let uid = user.uid;
            this.setState({uid});
        } else {
          console.log('Wait for it');
        }
      }, 500);

另外，请注意，获取currentUser.uid不是一个好主意，它应该先等待currentUser，然后再获取其属性。希望您没有等待太久，并且已经找到了解决方案

let renderAction = setInterval(() => {
        if ( firebase.auth().currentUser !== null ) {
            clearInterval(renderAction);
            let user = firebase.auth().currentUser;
            let uid = user.uid;
            this.setState({uid});
        } else {
          console.log('Wait for it');
        }
      }, 500);