来自Flatlist中Firebase Firestore的数据在React Native中不会呈现答案

【问题标题】：Data from firebase firestore in Flatlist in react native won't render来自Flatlist中Firebase Firestore的数据在React Native中不会呈现
【发布时间】：2021-03-01 11:20:12
【问题描述】：

我来自 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>
                            )
                        }}
                    />

【问题讨论】：

如果您也可以使用 console.log(data) 会有所帮助，以便我们看到您的回复

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

【解决方案1】：

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


useEffect(() => {
 firebase
  .firestore()
  .collection('users')
  .doc(uid)
  .collection('tasks');
  .get()
  .then((snapshot) => {

    const docList = []

    snapshot.forEach((doc) => {
      docList.push(doc.data());
    })

    setList(docList);
  })
  .catch((error) => {
    console.log(error)
  })
}, [])

【讨论】：

【解决方案2】：

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)
    })

【讨论】：