reactjs - 我无法使用 Hooks 在 React Native 的屏幕上显示从 Firebase 实时数据库获得的数据

问题描述

我最近开始在 React Native 中使用 Hooks，我正在尝试从 Firebase 实时数据库中获取数据并将其呈现在 FlatList 中。数据通过 console.log 以对象数组的形式显示在控制台上，但并未呈现在屏幕上。我究竟做错了什么？如何使其正常工作？

我的代码：

import React, { useState, useEffect } from "react";
import { StyleSheet, View, Text, FlatList, ActivityIndicator } from 'react-native';
import firebase from '@firebase/app';
import '@firebase/database';

export default function QuestList({ navigation }) {
    const title = navigation.getParam('title');

    const [data, setData] = useState([]);

    useEffect(() => {
          const db = firebase.database();
          db.ref('/questionnaires/')
            .on('value', snapshot => {
              
              //const response = snapshot.val();
              //console.log('value', snapshot.val());
              const response = snapshot.val();
              //console.log(response);
              const keys = Object.keys(response);
              const questWithKeys = keys.map(id => {
              return { ...response[id], id }
              });
              setData(questWithKeys);
              console.log(questWithKeys); 
              //return { data: questWithKeys };
                  
            
            });
        
      }, []);

    /*async() => {
        useEffect(() => {
            const db = firebase.database();
            db.ref('/questionnaires/')
            .on('value', snapshot => {
              console.log(snapshot.val());
            });
        });
    }*/

    

    return (
        <View>
            <Text style={{fontSize: 10}}>{data.title}</Text>
        <FlatList
        
            data={data}
            renderItem={({ item, index }) => (
                <View index={index}>
                    <Text >{item.title}</Text>
                </View>
            )}
            keyExtractor={item => item.id}
            numColumns={2}
            showsVerticalScrollIndicator={false}
        />
        </View>
    );
}

标签： reactjsfirebasereact-nativereact-hooks

reactjs - 我无法使用 Hooks 在 React Native 的屏幕上显示从 Firebase 实时数据库获得的数据

问题描述

解决方案

推荐阅读