Saya mengekod dalam React Native dan perlu mendapatkan nilai daripada Google Firebase secara langsung. Saya boleh mendapatkan nilai (1), tetapi apabila nilai dalam pangkalan data berubah, kotak teks dalam aplikasi saya tidak berubah dengan sewajarnya (2). Dengan kata lain, penyegerakan masa nyata dengan pangkalan data tidak dilaksanakan. Saya tidak tahu mengapa. Adakah anda akan membantu saya dengan masalah ini? Terima kasih banyak-banyak! Kod yang saya tulis adalah seperti berikut:
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> ); }
Saya perlu mendapatkan nilai daripada Google Firebase dalam masa nyata dan apabila ia berubah dalam pangkalan data, saya memerlukannya untuk menukar dalam kotak teks juga.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ini kerana data dimuatkan daripada Firebase (dan hampir semua API awan moden) secara tidak segerak dan belum lagi tersedia apabila
<Text style={styles.text}>{Data}</Text>anda dilaksanakan.Anda pasti mahu:
Cara biasa untuk melakukan ini adalah dengan menggunakan
useStateanduseEffectcangkuk.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()); }); }, []);Ini adalah topik yang agak kompleks, jadi saya syorkan membaca kedua-dua mata kail yang digunakan di sini dan juga lihat: