我如何使用钩子在 react-native 中从 firebase 实时数据库中读取数据答案

【问题标题】：how do i read data from firebase realtime database in react-native using hooks我如何使用钩子在 react-native 中从 firebase 实时数据库中读取数据
【发布时间】：2020-11-10 03:57:47
【问题描述】：

下面是我做过的事情

useEffect(() => {
        database()
        .ref(`/User/`)
        .on('value', function(snapshot) {
          const list = [];
          snapshot.val(doc => {
            const { name, email} = snapshot.val();
            list.push({
              id: doc.id,
              name,
              email,
            });
          });                



          
          setUsers(list);
          setLoading(false);
    
          console.log('User data: ', snapshot.val());
        });
  
    
        
    }, [userId]);

它在控制台上显示来自数据库的信息，但它不显示在应用程序上，为 firebase firestore 执行此操作可以正常工作，但不会将任何信息加载到应用程序页面

以下是我如何使用 flatlist 和 list.item 标签在应用程序中显示数据库中的数据

<FlatList
data={users}
ItemSeparatorComponent={() => <Divider />}
keyExtractor={item => item.id}
renderItem={({ item }) => (
  <TouchableOpacity
    onPress={() => navigation.navigate('Room', { thread: item })}
  >
    <List.Item
      title={item.name}
      description={item.email}
      titleNumberOfLines={1}
      titleStyle={styles.listTitle}
      descriptionStyle={styles.listDescription}
      descriptionNumberOfLines={1}
    />
  </TouchableOpacity>
)}

我正在使用最新版本的 react-native 和 firebase

【问题讨论】：

标签： javascript react-native firebase-realtime-database react-native-flatlist react-native-firebase

【解决方案1】：

您不应该再次向snapshot.val() 传递回调。

应该是：

ref.once('value', function(snapshot) {
  snapshot.forEach(function(userSnapshot) {
    var userKey = userSnapshot.key;
    var userData = userSnapshot.val();
    // userData['id'] = userKey;
    users.push(userData); 
  });
});

你也可以试试这个库https://github.com/CSFrequency/react-firebase-hooks。

【讨论】：

好收获。 1) 确实是 snapshot.forEach，而不是 snapshot.val 和 2) 你会想要得到迭代器的 val()，否则你每次都会得到 /User/name 和 /User/email。
users.push(id, userData);这是有效的，感谢您的澄清??
每当列表更新时，它都会形成另一个数组，添加到前一个数组中，我怎样才能让它只用更新的信息重新生成一个数组
@RaphaelInyang 您可以在 snapshot.forEach 之前清空数组；像用户 = []

【解决方案2】：

 database()
          .ref(`/User/`)
          .once('value', function(snapshot) {  snapshot.forEach(function(userSnapshot) {
const id = userSnapshot.key;
const userData = userSnapshot.val();
  userData['id'] = id;
users.push(id, userData);  });});

这是行得通的，flatlist需要一个id才能传递，非常感谢帮助的人??

【讨论】：