带有 Firestore 的平面列表？反应原生

Question

我确信这是很常见但似乎无法弄清楚的事情。每个用户在 Firestore 中都有一个“books”数组，这就是我想要在 Flatlist 中返回的内容，我哪里出错了？ Firebase 的第一天，所以我很确定它是基本的。谢谢:)

                <FlatList
                    data={() => { db.collection('users').doc(userEmail).data() }}
                    numColumns={2}
                    ListEmptyComponent={
                        <View style={styles.flatListEmpty}>
                            <Text style={{ fontWeight: 'bold' }}>Add Books Below</Text>
                        </View>
                    }
                    renderItem={({ item }) => (
                        <View style={styles.flatListStyle}>
                            <Text>book</Text>
                        </View>
                    )}
                />

那么这是数据库：

Answer 1

问题是对 firebase 的查询是异步操作，因此您需要解决该操作，然后将结果存储到组件的状态并将该状态分配给平面列表。示例：

const Component = () => {

    const [data, setData] = useState();

    const getData = async () => {
        const snapshot = await db.collection('users').doc(userEmail).get()

        setData(snapshot.data())
    }

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

    return (
        <FlatList
        data={data.books}
        numColumns={2}
        ListEmptyComponent={
            <View style={styles.flatListEmpty}>
                <Text style={{ fontWeight: 'bold' }}>Add Books Below</Text>
            </View>
        }
        renderItem={({ item }) => (
            <View style={styles.flatListStyle}>
                <Text>book</Text>
            </View>
        )}
    />
    )
}