Question

下面是我所做的

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

Answer 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。

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

这是有效的方法，单位列表要求传递ID，非常感谢帮助??

我如何使用钩子从react-native中从Firebase实时数据库中读取数据

2 个答案: