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.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 :
La façon courante de procéder consiste à utiliser les
useStateanduseEffectcrochets.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 :