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

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

我正在控制台中从 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',},});

解决方法

试试下面的代码...

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 [donorsData,setDonorsData] = useState([]);
    const [isLoading,setIsLoading] = useState(false);

    const getDataHandler = async () => {
        try {
            setIsLoading(true)
            database()
              .ref('users')
              .orderByChild('isDonor')
              .equalTo(true)
              .once('value')
              .then((results) => {
                 setIsLoading(false);
                 const data = results.map((snapshot) => {
                    return snapshot.val()
                 });
                 setDonorsData([...data]);
              }).catch(err => {
                 setIsLoading(false);
              });
        } catch(err) {
            setIsLoading(false)
            console.log("error : ",err.message);
        }
    }

    useEffect(() => {
        getDataHandler()
    },[]);

    if (isLoading) {
        return (
            <View>
                <ActivityIndicator size="large" color="black" />
            </View>
        )
    }

    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',},});

,

import React,useEffect } from "react";
import { Text,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",}}
          >
            <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",backgroundColor: "lightblue",});

,

这是一个关于 useEffect 的简单工作示例，用于获取数据并根据数据显示卡片。

世博会 => https://snack.expo.io/DYrvw6hOn

import React,{useState,useEffect} from 'react';
import { Text,StyleSheet } from 'react-native';
import Constants from 'expo-constants';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';



export default function App() 
{


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

  const sampleData = [{id:0,title:"One"},{id:1,title: "Two"}]

  useEffect(() =>
  {

    setTimeout(() => 
    {
      setData(sampleData)

    },3000)

  },[])

  const card = data.length > 0 
  ? data.map(item =>
  {
    return <Card style = {styles.cardStyle}>
        <Text>{item.id} - {item.title}</Text>
      </Card>
  })
  
      : <Text>Loading...</Text>



  return (
    <View style={styles.container}>
      
      {card}
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: 
  {
    flex: 1,justifyContent: 'center',paddingTop: Constants.statusBarHeight,cardStyle:
  {
    backgroundColor: 'lightblue',padding: 20,margin: 20
  }
  
});

,

当您获得所需的数据时，您必须使用状态来更新组件。你的代码应该是这样的：

 public class FileBatchJobModule : IBatchJobModule
 {
     public Func<IBatchJobContext,Task> OnCompletedAsync { get; set; }

     public async Task RunAsync(IBatchJobContext context)
     {
         //TODO
         Log.Information($"FileBatchJobModule,RunAsync started at {DateTime.Now}");
         const int defaultDelay = 15000;
         await Task.Delay(
             context.Parameters.TryGetValue("delay",out string delayString)
             ? (int.TryParse(delayString,out int delay) ? delay : defaultDelay)
             : defaultDelay);
         byte[] encodedText = Encoding.Unicode.GetBytes($"Updating text from async call at {DateTime.Now}{Environment.NewLine}");
         using (var sourceStream = new FileStream(
             @"C:\CentralTools\Files\filebatchjobmodule.txt",FileMode.Append,FileAccess.Write,FileShare.None,bufferSize: 4096,useAsync: true))
         {
             await sourceStream.WriteAsync(encodedText,encodedText.Length);
         };
         if (OnCompletedAsync != null)
         {
             await OnCompletedAsync.Invoke(context);
         }
         Log.Information($"FileBatchJobModule,RunAsync ended at {DateTime.Now}");
     }
 }