如何在本机反应中从firestore检索数据

Question

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 ai 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>
)

Answer 1

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:

1. Fetch the name
2. Display the name

But what is happening instead is:

1. You ask firebase to fetch the name with .get() . .get() and .then() return a Promise , which is an Object (hence why you're getting that error)
2. Your page renders with the Object
3. Firebase finishes fetching the name and then calls the function in name , ie (documentSnapshot) => documentSnapshot.get('nome')

So instead, consider:

1. Change <Text style={[styles.user, { color: colors.text }]}>{nome}</Text> into <Text style={[styles.user, { color: colors.text }]}>{this.state.nome}</Text>
2. Change (documentSnapshot) => documentSnapshot.get('nome') to (documentSnapshot) => {let _nome = documentSnapshot.get('nome'); this.setState({nome:_nome}) (documentSnapshot) => {let _nome = documentSnapshot.get('nome'); this.setState({nome:_nome})

And then what happens is that

1. You ask firebase to fetch the name
2. Your page renders, but firebase doesn't have your name yet. (it'll show up as undefined, but that's ok, because then:
3. Firebase fetches your name and then calls setState
4. React updates the page for you automatically with the new name when setState is called

If you don't want an undefined name, you can try something like <Text>{this.state.nome || "Waiting for response..."}</Text> <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.