Dalam React Native, selepas medan teks Firebase masa nyata ditukar, nilai baharu tidak dipaparkan.
P粉035600555
P粉035600555 2023-09-13 17:10:05
0
1
538

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.

P粉035600555
P粉035600555

membalas semua(1)
P粉670838735

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:

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan