首页 > 解决方案 > 无法在 Invertase 的 React Native Firebase 中使用 Cloud Firestore 查询分配变量值

问题描述

语境:

我正在使用RNFirebase 入门项目处理 React Native 项目。我users在凡士通有一个收藏。此集合中的每个文档都有一个字段username。我想在我的项目的主屏幕中显示登录用户的用户名。到目前为止,我已经从官方 Firebase 文档中弄清楚了如何使用这个示例username进行users查询。

第一个问题

在查询的正文中,我可以(出于某种模糊的原因)成功地使用我想要的文档的引用的alert()价值。username我想将此查询的值存储到currentUsername然后渲染它,这是失败的部分。

第二题

集成 Firebase 文档中的示例代码后,我的应用程序在调用signOut(). 错误是TypeError: null is not an object (evaluating _reactNativeFirebase.default.auth().currentUser.uid)。如果我删除示例代码,则signOut()可以正常工作。

...

import firebase from 'react-native-firebase';

...

export class Activity extends React.Component
{
    constructor(props)
    {
        super(props);
        this.componentDidMount = this.componentDidMount.bind(this);
        this.handleLogout = this.handleLogout.bind(this);
        this.state = { currentUser: null, errorMessage: null };
    }

    componentDidMount()
    {
        const { currentUser } = firebase.auth();
        this.setState({ currentUser });
    }

    handleLogout()
    {
        firebase.auth().signOut()
          .then(() => {
            this.props.navigation.navigate('Login'); // This part fails as well
          })
          .catch(error => {
            this.setState({ errorMessage: error.message });
          });
    }

    render()
    {
        const { currentUser } = this.state;
        const usersRef = firebase.firestore().collection('users').doc(firebase.auth().currentUser.uid);

        let currentUsername = '';

        usersRef.get().then(doc =>
        {
            if (doc.exists)
            {
                currentUsername = doc.data().username; // This value does not persist
                currentUsername = (' ' + doc.data().username).slice(1); // I'm trying to deep copy it here, and that still fails
                alert("Current username is: " + currentUsername); // This does work, however
            }
            else
            {
                alert("No such document!");
            }
        }).catch(error => {
            alert("Error getting document:", error);
        });

        return (
            <View style={styles.container}>
                <Text>
                    Hi @{currentUser && currentUsername}! // Renders nothing
                </Text>
                <Button title="Logout" onPress={this.handleLogout} />
            </View>
        );
    }
}

标签: javascriptreact-nativegoogle-cloud-firestorereact-native-firebase

解决方案


推荐阅读