屏幕上不显示使用Hooks从React Native中的Firebase Realtime数据库获取的数据 [英] Data obtained from Firebase Realtime Database in React Native using Hooks is not displayed on the screen

问题描述

我最近开始在React Native中使用Hooks，我正试图从Firebase Realtime数据库获取数据并将其呈现在FlatList中.数据以对象格式显示在控制台上，但是不起作用，没有在屏幕上呈现.我究竟做错了什么?如何使其正常工作?

I started using Hooks in React Native recently and I'm trying to get the data from Firebase Realtime Database and render it in FlatList. The data is being displayed on the console, in object format, but it is not working, it is not being rendered on the screen. What am I doing wrong? How do I make it work correctly?

我的代码:

import React, { useState, useEffect } from "react";
import { StyleSheet, View, Text, FlatList } 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 => {
          console.log(snapshot.val());
          const data = snapshot.val();
        });
  }, []);

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

推荐答案

您可能在 useEffect

useEffect(() => {
  const db = firebase.database();
  db.ref('/questionnaires/')
    .on('value', snapshot => {
      const response = snapshot.val();
      setData(response);
    });
}, []);

这篇关于屏幕上不显示使用Hooks从React Native中的Firebase Realtime数据库获取的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！