react-native - 如何在 react-native 功能组件中呈现从 firebase 数据库中提取的数据

Question

我正在从控制台中的 firebase 数据库中获取数据，如下所示。[{ "isDonor": true, "name": "Nadi", "photo": "https://gre", "uid": "2ZE" }, { "email": "mmaz", "isDonor": true, "name": "Mz", "photo": "https://gra", "uid": "Cb" }] 我想为每个对象创建卡片，但是如何在一段时间后获取数据时做到这一点？我想这样渲染

我检查了其他答案，但它们主要来自类组件。我尝试过使用useEffect钩子但无法实现这是我的代码

import * as React from 'react';
import {Text, View, StyleSheet, Image} from 'react-native';
import database from '@react-native-firebase/database';

const donorsData = [];
database()
  .ref('users')
  .orderByChild('isDonor')
  .equalTo(true)
  .once('value')
  .then((results) => {
    results.forEach((snapshot) => {
      // console.log(snapshot.key, snapshot.val());
      //   console.log(snapshot.val());
      donorsData.push(snapshot.val());
    });
    //   console.log('aft', donorsData);
  });
export default function New() {
  return (
    <View style={styles.container}>
      {donorsData.map((v, i) => {
        return (
          <View
            key={v.uid}
            style={{
              backgroundColor: 'white',
              padding: 10,
              margin: 5,
              borderRadius: 10,
            }}>
            <Text>{v.name}</Text>
            <Text>{v.email}</Text>
            <Image source={{uri: v.photo}} style={{height: 150, flex: 1}} />
          </View>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ecf0f1',
    padding: 8,
    backgroundColor: 'lightblue',
  },
});

标签： react-nativereact-native-androidreact-native-firebase

Answer 1

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

export default function New() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const donorsData = [];
    database()
      .ref("users")
      .orderByChild("isDonor")
      .equalTo(true)
      .once("value")
      .then((results) => {
        results.forEach((snapshot) => {
          donorsData.push(snapshot.val());
        });
        setData(donorsData);
      });
  }, []);

  return (
    <View style={styles.container}>
      {data?.map((v, i) => {
        return (
          <View
            key={v.uid}
            style={{
              backgroundColor: "white",
              padding: 10,
              margin: 5,
              borderRadius: 10,
            }}
          >
            <Text>{v.name}</Text>
            <Text>{v.email}</Text>
            { v.photo && <Image source={{ uri: v.photo }} style={{ height: 150, flex: 1 }} />} 
          </View>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ecf0f1",
    padding: 8,
    backgroundColor: "lightblue",
  },
});