Dans React Native, une fois le champ de texte Firebase en temps réel modifié, la nouvelle valeur ne s'affiche pas.

Question

Je code dans React Native et j'ai besoin d'obtenir une valeur de Google Firebase en direct. Je parviens à obtenir la valeur (1), mais lorsque la valeur change dans la base de données, la zone de texte de mon application ne change pas en conséquence (2). En d’autres termes, la synchronisation en temps réel avec la base de données n’est pas implémentée. Je n'arrive pas à comprendre pourquoi. Voulez-vous m'aider à résoudre ce problème? Merci beaucoup! Le code que j'ai écrit est le suivant :

import React, { useState } from 'react'; import { View, Text,
TextInput} from 'react-native'; import { NavigationContainer } from
'@react-navigation/native'; import { createNativeStackNavigator } from
'@react-navigation/native-stack'; import { ImageBackground,
StyleSheet, Pressable, Image } from 'react-native'; import { Slider }
from '@react-native-assets/slider' import { Linking } from
'react-native' import database from '@react-native-firebase/database';

var Data = "";

function Room({ navigation, route }) {

//(1)   
database()
  .ref('/esp01_1/id')
  .on('value', snapshot => {
    console.log('data from firebase: ', snapshot.val());
    Data = snapshot.val()   
  });

  return (
    <View style={styles.container}>
        //(2)
        <Text style={styles.text}>{Data}</Text>
    </View>   ); }

J'ai besoin d'obtenir une valeur de Google Firebase en temps réel et lorsqu'elle change dans la base de données, j'ai également besoin qu'elle change dans la zone de texte.

Answer 1

En effet, les données sont chargées depuis Firebase (et à peu près n'importe quelle API cloud moderne) de manière asynchrone et ne sont pas encore disponibles lorsque votre <Text style={styles.text}>{Data}</Text> est exécuté.

Vous aurez envie de :

1. Stockez les données dans l'état de votre composant
2. Dites à ReactJS de restituer le composant lorsque l'état change

La façon courante de procéder consiste à utiliser les useState and useEffect crochets.

const [data, setData] = useState();

// Putting the code to load from Firebase in a useEffect call 
// with no dependencies (the empty array at the end) ensure it
// only runs once, when the component is first rendered.
useEffect(() => {
  database()
    .ref('/esp01_1/id')
    .on('value', snapshot => {
      // Calling setData puts the data in the component's state
      // and tells ReactJS to rerender the UI.
      setData(snapshot.val());
    });
}, []);

Il s'agit d'un sujet assez complexe, je vous recommande donc de lire les deux crochets utilisés ici et de voir également :

• Données Firebase non définies lorsqu'elles sont utilisées dans React UseState (ce qui est assez similaire)
• Firebase | La lecture des données de Firebase renvoie "indéfini", mais console.log affiche un résultat précis (qui montre également comment se désabonner)
• La réponse de Firebase est trop lente
• Utilisez useEffect dans la classe fonctionnelle React pour écrire des données sur Firebase