Arrays 将所有数据推送到阵列后设置状态

我正试图用Firebase Firestore制作一个“类似facebook的新闻提要”。在componentDidMount中，我首先得到friendslist和per Friends，我将得到他们的活动，我将其推送到一个空数组中，并对id进行排序（）+反转（），id是时间戳。这样，最新的活动将在阵列中处于第一位。一旦所有项目被推送到数组中，我想设置数组的状态。这是我的代码：

import React, { Component } from 'react'
import { db, firebaseAuth } from '../../helpers/base'
import Activities from './Activities'

export default class ActivityList extends Component {
  state = {
    activityKeys: [],
  }

  componentDidMount(){
    const uid = firebaseAuth().currentUser.uid
    var activityKeys = []

    db.doc(`users/${uid}/social/friends`).get().then( (doc) => {      
      //GET ALL THE FRIENDS
      const friends = doc.data() //OBJECT OF {friendOneId: "friendOneId", friendTwoId: "friendTwoId"}

      //LOOP THROUGH FRIENDS AND GET ACTIVITY     
      Object.keys(friends).forEach( friend => {          
        db.collection("activity").where("user", "==", friend).get().then((querySnapshot) => {
          querySnapshot.forEach( (doc) => {

          const activity = doc.id
          activityKeys.push(activity)
          activityKeys.sort().reverse()                   
          })                      
        })         
      }) 
    })    
    console.log('activityKeys: ', activityKeys)
    this.setState({ activityKeys })                               
  }

 render () {
   return (
     <div>
       <h5>Activity List</h5>
       <Activities activityKeys={this.state.activityKeys} />        
     </div>
    )
  }
}

import React，{Component}来自“React”
从“../../helpers/base”导入{db，firebaseAuth}
从“/Activities”导入活动
导出默认类ActivityList扩展组件{
状态={
activityKeys:[]，
}
componentDidMount（）{
const uid=firebaseAuth（）.currentUser.uid
var activityKeys=[]
db.doc（`users/${uid}/social/friends`）.get（）。然后（（doc）=>{
//找所有的朋友
const friends=doc.data（）/{friendOneId:“friendOneId”，friendTwoId:“friendTwoId”}的对象
//通过朋友进行循环并获得活动
Object.keys（friends）.forEach（friends=>{
db.collection（“活动”）.where（“用户”，“朋友”）.get（）.then（（querySnapshot）=>{
querySnapshot.forEach（（doc）=>{
const activity=doc.id
activityKeys.push（活动）
activityKeys.sort（）.reverse（）
})                      
})         
}) 
})    
log（'activityKeys:'，activityKeys）
this.setState（{activityKeys}）
}
渲染（）{
返回(
活动列表

它看起来像是加载的，但括号之间是空的。如果我使用console.log This.state.activity，我会得到相同的结果。有人能告诉我如何解决这个问题吗？当所有的活动都被推到空数组中时，我如何设置state？
当你调用API时，你会得到一个承诺，但是你设置了
This.setState（{activityKeys}）
在调用完成之前。换句话说，在收到数据后，必须链接另一个
.then（）
，在其中调用
this.setState（{activityKeys}）
。使用forEach进行迭代时，有一点困难，那就是您创建了许多承诺，并且需要等待每个承诺完成。您可以将它们全部保存到列表中，然后使用
Promise.all
等待它们完成并从上一个
返回。然后
。阅读有关承诺的更多信息：