时间戳

首页 > 解决方案 > Firebase Firestore - 在 React Native 中显示查询的数据

firebase - Firebase Firestore - 在 React Native 中显示查询的数据

问题描述

我需要一些在文档中无法轻松找到的帮助。

因此，我已经了解如何在注册时在 firebase 中创建文档并将文档的 ID 设置为当前用户的 uid。现在我想引用当前用户的文档并在整个屏幕中使用它的数据。

这是我用来检索数据的函数：

const user = auth.currentUser;
const GettingUserData = async() => {
        const userData = firestore.collection('users').doc(user.uid);
        const doc = await userData.get();
        if (!doc.exists) {
        console.log('No such document!');
        } else {
        console.log('User data:', doc.data());
    }
  }

我将如何以{data.displayName}之类的方式使用doc.data()中的数据<Text></Text>

帮助或通读链接将不胜感激！

标签： firebasereact-native

解决方案

要管理远程数据，您需要一个状态来存储该信息。

如果您使用的是功能组件：

const [userData, setUserData] = React.useState(null)

const user = auth.currentUser;
const GettingUserData = async() => {
        const userData = firestore.collection('users').doc(user.uid);
        const doc = await userData.get();
        if (!doc.exists) {
        console.log('No such document!');
        } else {
        console.log('User data:', doc.data());
        setUserData(doc.data)
    }
  }
  
  
  return (<View><Text>{userData?.name}</Text></View>)

如果您使用的是类组件：

const user = auth.currentUser;
const GettingUserData = async() => {
        const userData = firestore.collection('users').doc(user.uid);
        const doc = await userData.get();
        if (!doc.exists) {
        console.log('No such document!');
        } else {
        console.log('User data:', doc.data());
        this.setState({userData: doc.data()})
    }
  }
  
  
  return (<View><Text>{this.state.userData?.name}</Text></View>)

推荐阅读