Question

在我的反应原生应用中，使用firebase作为后端，我有一个像这样的初始LoginScreen：（react-navigation的导航功能将屏幕作为第一个参数传递给props.navigation.params.state传递给该屏幕的第二个参数）

class LoginScreen extends Component {

    constructor() {
        this.state = {
            currentUser: {},
            email: null,
            psw: null

...

async logIn(email, pass) {
  try {
      await firebaseApp.auth()
          .signInWithEmailAndPassword(email, pass)
  } catch (error) {
      alert(error.toString())
  }
}

listenForAuth() {
    const { navigation } = this.props
    this.unsubscribe = firebase.auth().onAuthStateChanged(user => {
        if (user) {
            this.setState({
                currentUser: {
                    id: user.uid
                }
            })
            navigation.navigate('MainApp', { currentUser: this.state.currentUser })
        } else {
            this.setState({
                loading: false
            })
        }
    })
}

componentWillMount() {
    this.listenForAuth()
}

render() {
    ...
    <LoginButton onPress={() => this.logIn(this.state.email,this.state.psw)
    ...

和一个MainApp组件作为react-navigation tabNavigator，屏幕＆＃39; Profile＆＃39;看起来像是：

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)}
                 />}
    ...

当应用程序启动时，第一次监听器检测到用户的存在时，它会导航到MainApp屏幕，但会出现警告，组件的渲染功能中出现{this.state.currentUser.user}描述它的未定义;但是当我浏览tabBar时，我可以看到该用户名，但ListView是空的。如果我刷新，则检索firebase数据并填充ListView。

如果我注销并且重新登录不再发生，则会立即加载数据，不会出现警告并立即填充列表视图。

如果我退出并重新启动应用程序，因为已经有登录用户，它会导航到MainApp屏幕，但是如果我注销并重新登录一切正常，那么上面会出现同样的问题。

请问，我的错误是什么？有人能帮助我吗？

Answer 1

问题是当加载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，然后再获取其属性。希望你没有等待太久，已经找到了解决方案。

反应原生firebase onAuthStateChanged

1 个答案: