Reactjs 我正在尝试从firestore中提取数据，并使用快照方法将其设置到我的阵列中

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

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

---

您可能会得到多个更改，但当您循环这些更改，然后根据每个文档设置状态时：

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

当你这样做的时候

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

每次执行

forEach

时，它都会从状态更新现有的

usersArr

，并将其替换为最新的。因此，您最终只能得到状态中的最后一个数据

要消除这种情况，可以在

setState

和

concat

中将新结果用于现有结果

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