React Native 不从 IOS 上的数据库中渲染数据

Question

我在 IOS 模拟器上渲染数据有问题。渲染在网站上正常工作，但在 IOS 上我仍然卡在“正在加载..”文本上。

这是我的代码：

import React from 'react'
import { useState } from 'react';
import { useEffect } from 'react';
import { SafeAreaView, Text, View, StyleSheet, Image, Alert } from 'react-native';
import { Card } from 'react-native-paper'
import firebase from 'firebase'
import Button from '../components/Button'
import Background from '../components/Background'
import TopBar from '../components/TopBar'


export default function HomeScreen({ navigation }) {

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

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

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

  const card = data.length > 0 
  ? data.map(item =>
  {
    return            <Card key={item.uid} style={{ marginBottom: 20, borderRadius: 10, }}>
    <Text>{item.name}</Text>
    <Text>{item.description}</Text>
    <Image src={item.photo}></Image>
  </Card>
  })
  
      : <Text>Loading...</Text>



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

在网站上一切正常Website Screen

但是在 IOS 模拟器上我只得到了加载

IOS Screen

我尝试了很多在这里找到的解决方案，但没有人适用于这种情况。我想可能是因为iOS没有数据？当我将控制台日志放在返回的顶部时，我什么也没得到。

Answer 1

这可能是竞争条件错误。您不应该依赖在 1500 毫秒内获取的数据。

如果这不起作用。确保您从 firebase 获得的结果是正确的。

也许是这样的？

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

const fetchDonorData = () => {
   firebase.database()
      .ref("testdb")
      .orderByChild("isDonor")
      .equalTo(true)
      .once("value")
      .then((results) => {
         console.log({result}) //Make sure the data looks the way you want it
         const mappedResult = results?.map(snapshot => snapshot.val())
         setData(mappedResult)
       })
}

  useEffect(() => {
    fetchDonorData()
  }, [])

const renderItem = ({item}) => 
  <Card style={{ marginBottom: 20, borderRadius: 10, }}>
    <Text>{item.name}</Text>
    <Text>{item.description}</Text>
    <Image src={item.photo}></Image>
  </Card>

return (
   <View style={styles.container}>
      <FlatList
       data={data}
       renderItem={renderItem}
       keyExtractor={({item}) => item.uid}
       ListEmptyComponent={<Text>Loading...</Text>}
       />
    </View>
)