从 Firebase Firestore 发送和检索用户 ID

Question

我正在使用 Firebase.auth() 对 Google Firebase 的登录进行身份验证，然后我检索 UID 并将其发送到我的 Redux Store。除非我导航到下一页然后返回登录页面，否则 UID 不会发送到商店。看来我的操作顺序已关闭，如何在我的 Redux 商店中获取 UID 而无需重新登录/刷新页面。

class Home extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            id: ''
        }
    }

id (value) {
        this.props.id(value);
    }

handleLogin = (load) => {

        const { email, password } = this.state

        Firebase.auth()
            .signInWithEmailAndPassword(email, password)
            .then(async cred => {
                return db.collection('users').doc(cred.user.uid).set({
                    test: 'test'
                })
            })
            .then(() => this.props.navigation.navigate('AddProfiles'))

            .catch(error => console.log(error))
        

        const currentUser = firebase.auth().currentUser;
        
        const userId = currentUser["uid"];
       
        this.setState({
            id: userId
        })
        this.props.id(this.state.id);
    }

<TouchableOpacity style={styles.signupbutton}>
      <Button
           color='white'
           title="Log in"
           onPress={(payload) => this.handleLogin()}
       />
</TouchableOpacity>

const mapStateToProps = (state) => {
    return {
        counter: state.counter,
        value: state.id
    };
}

const mapDispatchToProps = dispatch => {
    return {
        id: (value) => dispatch({ type: 'id', payload: value })
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Home)

Answer 1

现在，以const currentUser 行开头的代码在signInWithEmailAndPassword 完成之前运行，因为signInWithEmailAndPassword 是一个异步 函数。它在刷新时起作用的原因是，firebase.auth().currentUser 有一个值，所以

您可以将您的代码移动到then 块内，以便它仅在函数完成时运行。它看起来像这样（未经测试，因为我没有你的其余代码）：

handleLogin = (load) => {

        const { email, password } = this.state

        Firebase.auth()
            .signInWithEmailAndPassword(email, password)
            .then(async cred => {
                this.setState({
                 id: cred.user.uid
                })
                this.props.id(cred.user.id);
                return db.collection('users').doc(cred.user.uid).set({
                    test: 'test'
                })
            })
            .then(() => this.props.navigation.navigate('AddProfiles'))

            .catch(error => console.log(error))
}

注意setState 也是异步的，所以在setState 之后调用this.props.id(this.state.id); 在第一次运行时可能会失败。

虽然上面应该可以解决眼前的问题，但我建议onAuthStateChanged：https://firebase.google.com/docs/auth/web/start#set_an_authentication_state_observer_and_get_user_data

这样，您可以登录并根据其值设置 Redux 状态或在用户刚返回页面时运行相同的代码来设置 Redux 值。这可能会导致比将所有内容都绑定到 signInWithEmailAndPassword 更强大的情况