Reputation: 55
I'm trying to retrieve data from my collection on firestore but when i put this data inside a component such as Text i get an error, however when a i put this same data on console.log() i can use its value with no problems.
My code
const nome = firestore().collections('usuários').doc(auth().currentUser.uid).get().then(
(documentSnapshot) => documentSnapshot.get('nome'))
return (
<View style={{ flex: 1 }}>
<View style={styles.imageContainer}>
<Image source={require('../assets/img/user-bg.jpg')} style={styles.image} />
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View style={styles.userLabel}>
<Text style={[styles.user, { color: colors.text }]}>{nome}</Text>
<Text style={[styles.email, { color: colors.text }]}>email</Text>
</View>
<CaretDownIcon width={8} height={8} fill={colors.text} style={{ marginRight: 10 }}/>
</View>
</View>
</View>
)
Upvotes: 0
Views: 786
Reputation: 1418
In order to get nome, you have:
const nome = firestore().collections('usuários').doc(auth().currentUser.uid).get().then(
(documentSnapshot) => documentSnapshot.get('nome'))
This doesn't return a name! Instead:
firestore().collections('usuários').doc(auth().currentUser.uid).get()
returns a Promise
. So what you want to happen is:
But what is happening instead is:
.get()
. .get()
and .then()
return a Promise
, which is an Object
(hence why you're getting that error)Object
name
, i.e.
(documentSnapshot) => documentSnapshot.get('nome')
So instead, consider:
<Text style={[styles.user, { color: colors.text }]}>{nome}</Text>
into <Text style={[styles.user, { color: colors.text }]}>{this.state.nome}</Text>
(documentSnapshot) => documentSnapshot.get('nome')
to (documentSnapshot) => {let _nome = documentSnapshot.get('nome'); this.setState({nome:_nome})
And then what happens is that
setState
setState
is calledIf you don't want an undefined
name, you can try something like <Text>{this.state.nome || "Waiting for response..."}</Text>
.
If you're using an ES6 function renderer right now, you'll need to use a React Class instead.
Upvotes: 1