我正在尝试从 firestore 中提取数据并使用 snapShot 方法将其设置到我的数组中答案

【问题标题】：I am trying to pull data from firestore and set it to my array using the snapShot method我正在尝试从 firestore 中提取数据并使用 snapShot 方法将其设置到我的数组中
【发布时间】：2019-08-15 02:21:01
【问题描述】：

我正在尝试将来自 firestore 的传入数据设置为处于状态的数组。我正在使用 snapShot 方法接收数据更改事件，并显示用户和更新，但我似乎只收到一个文档返回。

import React, { Component } from 'react'
import firebase from '../firebase'

export class Display extends Component {
    constructor(){
        super();

        this.state={
            usersArr: []
        }
    }


componentDidMount(){
    const db = firebase.firestore()

    db.collection('users')
    .onSnapshot(snap => {
        let changes = snap.docChanges()
        changes.forEach(change =>{
            this.setState({usersArr: change.doc.data()})
        })
    })
}

【问题讨论】：

标签： reactjs google-cloud-firestore

【解决方案1】：

当你这样做时，

changes.forEach(change =>{
   this.setState({usersArr: change.doc.data()})
})

每次forEach 执行时，它都会从状态更新现有的usersArr 并用最新的替换它。所以你最终只能得到状态中的最后一个数据。

要摆脱这种情况，您可以在setState 和concat 中使用previous state 将新结果添加到现有结果中。

changes.forEach(change =>{
   this.setState(prevState=>({
      ...prevState,
      usersArr : prevState.usersArr.concat(change.doc.data())
    }), ()=>console.log(this.state.usersArr))
})

【讨论】：

【解决方案2】：

您可能会获得多项更改，但是当您循环访问它们然后根据每个单独的文档设置状态时：

let changes = snap.docChanges()
changes.forEach(change =>{
    this.setState({usersArr: change.doc.data()})
})

所以第一次迭代将状态设置为第一个更改的文档，第二次迭代设置为第二个文档（覆盖第一个），第三次迭代设置为第三个文档（覆盖第二个）。所以在循环结束时，你只剩下最后一个文档了。

如果您想将所有更改的文档的数据设置为状态，您可以这样做：

let docs = []
let changes = snap.docChanges()
changes.forEach(change =>{
    docs.push(change.doc.data())
})
this.setState({usersArr: docs})

以上仅将更改的文档添加到状态。所以最初这将是所有文档，但是当您稍后添加一个文档时，docChanges() 将只包含该一个文档。将所有文档添加到状态中更为典型，您可以通过迭代 snap 而不是 snap.docChanges：

let docs = []
snap.forEach(doc =>{
    docs.push(doc.data())
})
this.setState({usersArr: docs})

【讨论】：