Estoy tratando de obtener datos de mi base de datos de firestore en mi proyecto nativo de reacción. Pude obtener los datos de una colección completa, pero no estoy seguro de cómo obtendría diferentes valores de campo individualmente. ¿Cómo mostraría los valores FlagQuizscore: 83.33333333333334 WalesQuizscore: 80 monedas: 46 de mi base de datos de firestore en mi proyecto nativo de reacción?
Este código muestra los valores de toda la colección:
import {useEffect, useState} from "react"; export default function ModesScreen({navigation}) { const email = auth.currentUser.email const userCollectionRef = collection(db,"Users") const [users,setUsers] = useState([]) useEffect(()=>{ const getUsers = async () => { const data = await getDocs(userCollectionRef) setUsers(data.docs.map((doc)=>({...doc.data(), id: doc.id}))) } getUsers() },[]) return ( <View style={styles.container}> {users.map((users)=>{return<View key={doc.id}> <Text>{users.WalesQuizscore}</Text> <Text>{users.coins}</Text> </View>})} </View> ); }Resultados de mi base de datos. Quiero ingresar a mi proyecto nativo de reacción:
Si solo está tratando de obtener un solo documento, puede usar la función getDoc() . Además, no es necesario declarar a los usuarios como una matriz. Intente refactorizar el código como se muestra a continuación:
import {useEffect, useState} from "react"; export default function ModesScreen({navigation}) { const email = auth.currentUser.email const userDocRef = doc(db,"Users", email) const [user, setUser] = useState({}) useEffect(() => { const getUser = async () => { const snap = await getDoc(userDocRef) setUser({email, ...snap.data()}) } getUser() },[]) return ( <View style={styles.container}> {return <View key={user.email || 'email'}> <Text>{user.WalesQuizscore}</Text> <Text>{user.coins}</Text> </View>})} </View> ); }