如何从Cloud Firestore获取查询结果作为对象?

时间:2018-02-26 15:46:56

标签: javascript reactjs firebase google-cloud-firestore

我从一个ReactJS项目中的firebase实时数据库迁移到Cloud firestore。我对Firestore相当新。

这就是我需要的。请注意,我有项目'项目'中存储的项目的详细信息。

在实时数据库中,我只需要这样做以获取数据并将其存储在以下状态:

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

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

1 个答案:

答案 0 :(得分:2)

几乎就在那里,你只想把空对象放在迭代之外......就像那样......

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