使用 React Native 在平面列表中 Firestore 数据答案

【问题标题】：Firestore data in a flatlist with react native使用 React Native 在平面列表中 Firestore 数据
【发布时间】：2022-12-20 00:34:25
【问题描述】：

我一直在尝试将数据从我的 Firestore 数据库输出到 React native 中的 Flatlist，但到目前为止没有成功。

我使用这个 Flatlist for RN 和 Firestore docs 作为入门参考，但出于某种原因，我在这里遗漏了一些关于平面列表输出方法的内容，因为它不会输出平面列表本身。当我控制台记录位置数组时，它向我显示了我查询过的所有文档，因此它确实将它们全部推送到一个数组中，我的理解是 FlatLists 它们需要一个数组才能运行，但它不会抛出任何错误，只是不会'渲染。欢迎任何帮助！


    useEffect(async () => {
        const locations = [];
        const querySnapshot = await getDocs(collection(db, "Location"));
        querySnapshot.forEach((doc) => {
          // doc.data() is never undefined for query doc snapshots
            locations.push(doc.data());
          console.log(locations);
        }); 
        return () => querySnapshot();
    }, []);
    

    return (
        <View style={styles.screen}>
            <Text>hello</Text>
            <FlatList data={locations}
                renderItem={({ item }) => (
                    <View >
                        <Text>name: {item.name}</Text>
                        <Text>Depth: {item.depth}m</Text>
                        <Text>GeoLocation: {item.geo}</Text>
                        <Text>id: {item.uid}</Text>
                    </View>
                )}
            />

【问题讨论】：

标签： arrays firebase react-native google-cloud-firestore

【解决方案1】：

您的变量locations 定义在您的useEffect 中。 FlatList 无法访问它。您需要通过 useState 创建一个 state 并在加载后将数据存储在那里。设置 state 将导致组件重新渲染，FlatList 将更新为新数据。

这是一种可能的实现。

const SomeScreen = () => {

    const [locations, setLocations] = useState([])

    useEffect(() => {
        const loadData = async () => {
            const querySnapshot = await getDocs(collection(db, "Location"));
            setLocations(querySnapshot.map(doc => doc.data()))
        }

        loadData()
    }, [setLocations]);
    

    return (
            <FlatList data={locations}
                renderItem={({ item }) => (
                    ...
                )}
            />
   )
}

【讨论】：

感谢您的建议，我实际上已经弄清楚了如何让它通过“onSnapShot”动态更新，但感谢您的解释！！！

【解决方案2】：

这是一个简单的方法：

import React, {useState} from 'react';
import { Button, View, Text, FlatList } from 'react-native';

import {query, where,  collection, getDocs } from 'firebase/firestore';

import {db} from './firestoreconfig.js';

const App = () => {
   const [cities, setCities] = useState([]);

   async function readData() 
   {
      setCities([]);
     const mycities = [];
     const q = query(collection(db, "cities"), where("capital", "==", true) );
     const querySnapshot = await getDocs(q);     
     querySnapshot.forEach( (city) => {mycities.push({key: city.id, name: city.data().name} )})   
     
     setCities(mycities);
     
   }
  return (

<View
style = {{marginTop: 50}}
>   
   <Button   
   title='Read Data'
   onPress={ () => readData()} 
    />

         <FlatList 
         data={cities}
        
        renderItem = { 
            
            ({item}) => 
            <Text>{item.key} {item.name}</Text> 
            
    }
    />

    </View>
   );
}

export default App;

【讨论】：