Dalam React Native, selepas medan teks Firebase masa nyata ditukar, nilai baharu tidak dipaparkan.

Question

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.

Answer 1

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:

1. Simpan data dalam keadaan komponen anda
2. Beritahu ReactJS untuk menyusun semula komponen apabila keadaan berubah

Cara biasa untuk melakukan ini adalah dengan menggunakan useState and useEffect cangkuk.

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:

• Data Firebase tidak ditakrifkan apabila digunakan di dalam bertindak balas useState (yang agak serupa)
• Firebase | Membaca data daripada Firebase mengembalikan "tidak ditentukan", tetapi console.log menunjukkan hasil yang tepat (yang menunjukkan cara untuk menyahlanggan juga)
• Tindak balas Firebase terlalu perlahan
• Gunakan useEffect dalam kelas berfungsi bertindak balas untuk menulis data ke firebase