使用 React 和 Firebase/Firestore 将数据添加到嵌套的 foreach 数组答案

【问题标题】：Add data to nested foreach array using React and Firebase/Firestore使用 React 和 Firebase/Firestore 将数据添加到嵌套的 foreach 数组
【发布时间】：2019-08-18 21:25:11
【问题描述】：

我在使用 Firestore 时有几个嵌套调用。有了这些，它们依赖于 .then() 的使用，因为它们是网络调用。它们似乎是如此嵌套，以至于它们无法访问我要更新的名为“消息”的列表。

由于这种混乱，我在循环的每次迭代中都更新状态，这非常不高效。

如果以此为起点，我如何推送到消息数组？：

顺便说一句，这个方法 onCollectionUpdate 绑定在我的构造函数中，例如 this.onCollectionUpdate = this.onCollectionUpdate.bind(this)。谢谢！

onCollectionUpdate = querySnapshot => {
    const messages = [];
    querySnapshot.forEach(doc => {
      const { _id, text, createdAt, user } = doc.data();
      var userId = user.id
      var userRef = firebase.firestore().collection('users').doc(userId)
      userRef.get().then(data => {
        var user = data.data()
        var userObject = {
            _id: userId,
            name: user.name,
            avatar: user.profilePictureURL
        }
        var newMessage = {
          _id,
          text,
          createdAt: new Date(createdAt.seconds),
          user: userObject
        }
        this.setState(prevState => ({messages: [...prevState.messages,newMessage]}))

        messages.push() //Not working. By time it reaches set state below (outside of the loops) it is empty.
      })
    })
    this.setState({
      messages,
      loading: false,
    });
  }

【问题讨论】：

标签： reactjs firebase react-native promise google-cloud-firestore

【解决方案1】：

解决办法

onCollectionUpdate = querySnapshot => {
    var promises = [];
    const messages = [];

    querySnapshot.forEach(doc => {
      const { _id, text, createdAt, user } = doc.data();
      var userId = user.id
      var userRef = firebase.firestore().collection('users').doc(userId)
      promises.push(
        userRef.get()
        .then(data => {
          var user = data.data()
          var userObject = {
            _id: userId,
            name: user.name,
            avatar: user.profilePictureURL
          }
          return {
            _id,
            text,
            createdAt: new Date(createdAt.seconds),
            user: userObject
          }
        })
      )
    })

    Promise.all(promises).then(newMessages=> {
        this.setState(prevState => {
            return {
                messages: [...prevState.messages, ...newMessages],
                loading: false,
              }
        })
    })
  }

一旦获得所有响应，就调用 setState 一次。希望这是你想要的:)

【讨论】：