首页 > 解决方案 > 来自Flatlist中Firebase Firestore的数据在React Native中不会呈现

问题描述

我来自 firebase firestore 的数据不会在 react native Flatlist 中呈现。有谁知道为什么?它应该在列表中呈现 3 个任务,但是当我运行我的应用程序时它完全是空白的。

const [list, setList] = useState([])

useEffect(() => {
        firebase.firestore().collection('users').doc(uid).collection('tasks').get((snapshot) => {
            var data = snapshot.docs;
            data.forEach((doc) => {
                setList({
                    key: doc.id,
                    task : doc.data().task,
                })
            })
        })
    });

        return (
            <View style={styles.container}>
                <Text style={styles.title}>Here is your tasks for today</Text>
                    <FlatList style={{width: '100%'}}
                        data={list}
                        keyExtractor={(item) => item.key}
                        renderItem={({item}) => {
                            return(
                                <View>
                                    <Text>{item.task}</Text>
                                </View>
                            )
                        }}
                    />

标签: firebasereact-nativegoogle-cloud-firestore

解决方案


flatlist 数据需要是一个数组

这使列表成为一个不会渲染的对象

setList({
                    key: doc.id,
                    task : doc.data().task,
                })

我想这会奏效

 firebase.firestore().collection('users').doc(uid).collection('tasks').get((snapshot) => {
        var data = snapshot.docs;
let FirebaseArray = []
        data.forEach((doc) => {
FirebaseArray.push({
                key: doc.id,
                task : doc.data().task,
            })
          
        })
  setList(FirebaseArray)
    })

推荐阅读