React Native中，实时Firebase文本字段更改后，未显示新值的问题

Question

我正在使用React Native进行编码，并且需要从实时的Google Firebase中获取一个值。我能够获取到这个值（1），但是当数据库中的值发生变化时，我的应用程序中的文本框没有相应地变化（2）。换句话说，它与数据库的实时同步没有实现。我无法弄清楚原因。你能帮我解决这个问题吗？非常感谢！我写下的代码如下：

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>   ); }

我需要从实时的Google Firebase中获取一个值，并且当它在数据库中发生变化时，我需要它在文本框中也发生变化。

Answer 1

这是因为数据是从 Firebase（以及几乎所有现代云 API）异步加载的，并且当您的 {Data} 时尚不可用Text> 被执行。

你会想要：

1. 将数据存储在组件的状态中
2. 告诉ReactJS在状态改变时重新渲染组件

执行此操作的常见方法是使用 useState 和 useEffect 挂钩。

雷雷

这是一个非常复杂的主题，所以我建议阅读这里使用的两个钩子，并查看：

• Firebase 数据在 React useState 中使用时未定义（非常相似）
• Firebase |从 Firebase 读取数据返回“未定义”，但 console.log 显示精确结果（显示如何取消订阅）
• Firebase 响应太慢
• 在react函数类中使用useEffect向firebase写入数据