如何从 Cloud Firestore 以对象的形式获取查询结果？

Question

我在我的 ReactJS 项目之一中从 firebase 实时数据库迁移到 Cloud firestore。我对 Firestore 还很陌生。

这是我需要的。考虑到我有存储在集合'Items' 中的项目的详细信息。

在实时数据库中，我只需要这样做即可获取数据并将其存储在状态中：

database.ref('Items').once('value', (snapshot) => {
    this.setState({items: snapshot.val()})    
})

snapshot.val()将Items中的所有对象作为包含它们的单个对象返回。这使我可以轻松地将它们呈现在表格中Object.keys(this.state.items).map()

据我目前所知：

Firestore 的情况并非如此。Firestore 返回一个对象，该对象只能通过遍历每个子项来检索子项中的数据。

所以我能想到的最好的是：

db.collection('Items').get().then(gotData)
gotData = (snapshot) => {
    snapshot.forEach((item) => {
        const item = {[item.id]: item.data()}
        this.setState(previousState => ({
            items : {...previousState.items, ...item}
        }))
    })
}

上述解决方案的问题在于，状态将被更新的次数等于集合中的项目数。所以我想知道是否有更好的方法来做到这一点。

Answer 1

几乎在那里，您只想像这样将空对象放在迭代之外......

db.collection('Items').get().then(snap => {
    const items = {}
    snap.forEach(item => {
     items[item.id] =  item.data()
    })
    this.setState({items})
}

或者你可以直接映射它，我觉得这更容易思考。

db
 .collection('Items')
 .get()
 .then(collection => {
    const items = collection.docs.map(item => {[item.id]: item.data()})
    this.setState({ items })
 })

或者您可以使用reduce返回包含所有项目的对象。

db
 .collection('Items')
 .get()
 .then((collection) => {
     const items = collection.docs.reduce((res, item) => ({...res, [item.id]: item.data()}), {});
     this.setState({items})
 })