将所有数据推送到数组后设置状态

关键词：

【中文标题】将所有数据推送到数组后设置状态【英文标题】：Set state once all data is pushed to array 【发布时间】：2018-05-10 21:19:19 【问题描述】：

我正在尝试使用 Firebase Firestore 在 React 中制作“facebook 类型的新闻源”。在 componentDidMount 中，我首先获取好友列表，每个好友我将获取他们的活动，我将其推送到一个空数组和 sort() + reverse() id，它们是时间戳。这样，最新的活动将在数组中排在第一位。一旦 ALL 项目被推送到数组，我想用数组设置状态。这是我拥有的代码：

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

问题是数组设置不正确，或者它可能是在所有项目被推送之前设置的。这是我得到的日志：

看起来它已加载，但括号之间为空。如果我 console.log This.state.activity 我得到相同的结果。有人可以告诉我如何解决这个问题吗？一旦所有活动都被推送到空数组中，我该如何设置状态？

【问题讨论】：

【参考方案1】：

当您调用 API 时，您会收到一个 Promise，但您在调用完成之前设置了 this.setState( activityKeys )。换句话说，您必须在收到数据后链接另一个.then()，您将在其中调用this.setState( activityKeys )。有点困难的是，在使用 forEach 进行迭代时，您创建了许多 Promise，并且您需要等待每个 Promise 完成。您可以将它们全部保存到列表中，并使用Promise.all 等待它们完成并从之前的.then 返回。阅读有关承诺的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

【讨论】：

将数据从多个输入推送到状态数组

】将数据从多个输入推送到状态数组【英文标题】：Pushdatafrommultipleinputstostatearray【发布时间】：2017-09-1205:18:41【问题描述】：我的程序生成的输入很少，我尝试将数据推送到我的状态数组exportdefaultclassTransmittersTableextendsComponentc... 查看详情

如何将状态推送到包含特定项目的数组？

...的大部分项目都处于我想将其推送到数组中的状态我想将所有状态推送到某些项目之外这是我的状态state=username:\'..\',date:\'..\',time:\'..\',description:\'..\',images 查看详情

如何使用ajax将数据推送到数组

...。将多个产品添加到购物车后的预期结果是返回一个包含所有offerId的数组。目前，如果我print_r的offerIdArray，它只显示最新按钮的 查看详情

Javascript：将过滤后的数组推送到现有数组

...档的任务。每当我执行archiveCompleted函数时，我都希望将所有已完成的任 查看详情

清除后如何将元素推送到向量？

...。一旦计数等于K，以相反的顺序打印向量并清除向量的所有元素。#include<iostream>#include<bits/s 查看详情

无法弄清楚如何将数据异步推送到数组

...检索我存储在S3存储桶中的文件的元数据。它将存储桶中所有文件的键存储在一个数组中，然后遍历该数组以获取每个单独文件的元数据。问题是我存储值的元数据数组总是空的。我在值被推入数组的位置之后立即输入了一个打 查看详情

从异步回调函数将对象推送到本地数组

...关我的角色的数据。每个连接都有它自己的特点。我想将所有关于字符的数据（人，有它的名字，年龄，职业，......）到Characters数组中，这样我 查看详情

将复选框值推送到状态 onChange 的数组

】将复选框值推送到状态onChange的数组【英文标题】：PushcheckboxvaluetoarrayonstateonChange【发布时间】：2018-07-2615:21:36【问题描述】：我想让用户从复选框中选择星期几。当一个复选框被选中时，该复选框的值应该更新this.state.days。... 查看详情

如何从特定列、特定表中选择所有内容，然后将它们推送到数组中？

】如何从特定列、特定表中选择所有内容，然后将它们推送到数组中？【英文标题】：HowdoIselecteverythingfromaspecificcolumn,fromaspecifictable,andthenpushthemintoanarray?【发布时间】：2020-03-0416:36:05【问题描述】：我想从名为userdata的表中获取... 查看详情

Image Scraper 将所有附件从单个消息推送到数组

】ImageScraper将所有附件从单个消息推送到数组【英文标题】：ImageScraperpushingallattachmentsfromsinglemessagetoarray【发布时间】：2021-11-2502:55:33【问题描述】：我一直在这里使用此脚本https://github.com/17teen/Discord-Image-Scraper，但偶然发现了... 查看详情

将json数据推送到angular js中的现有数组

】将json数据推送到angularjs中的现有数组【英文标题】：Pushjsondatatoexistingarrayinangularjs【发布时间】：2014-10-1111:43:56【问题描述】：我在将数据推送到现有数组时遇到问题。您可以看到我正在将数据发布到表格中，但是，当用户输... 查看详情

Mongoose push() 函数没有将数据推送到数组中

】Mongoosepush()函数没有将数据推送到数组中【英文标题】：Mongoosepush()functionisn\'tpushingthedataintothearray【发布时间】：2021-09-0123:21:36【问题描述】：我必须将产品数据推送到其中包含store[]数组的用户文档中，我使用的代码如下constd... 查看详情

从 Axios 响应中解析 XML，推送到 Vue 数据数组

】从Axios响应中解析XML，推送到Vue数据数组【英文标题】：ParseXMLfromAxiosresponse,pushingtoVuedataarray【发布时间】：2018-07-2502:02:31【问题描述】：在我的Vue应用程序中，我使用Axios获得了一个XML文件，并使用parseString将XML解析为JSON。然... 查看详情

Vuex store - 将状态中的项目推送到状态数组导致数组中的前一个项目更改为当前状态项目

】Vuexstore-将状态中的项目推送到状态数组导致数组中的前一个项目更改为当前状态项目【英文标题】：Vuexstore-pushingiteminstatetoastatearraycausesthepreviousiteminthearraytochangetothecurrentstateitem【发布时间】：2021-02-0217:30:49【问题描述】：我... 查看详情

需要在 jQuery 中从 AJAX 将所有 JSON 推送到一个数组中

】需要在jQuery中从AJAX将所有JSON推送到一个数组中【英文标题】：NeedtopushallJSONintoanarrayfromAJAX,injQuery【发布时间】：2013-06-1723:32:13【问题描述】：代码如下：varnewFeeds=[];//**GLOBAL**$(document.body).click(function()$.ajax(type:"POST",url:"http://mys... 查看详情

将数据推送到数组中，但在将时间戳转换为日期之后

】将数据推送到数组中，但在将时间戳转换为日期之后【英文标题】：Pushdatainarraybutafterconvertingtimestamptodate【发布时间】：2020-07-1011:26:03【问题描述】：从Firestore获取数据并将其推送到数组中。这工作正常，但在此过程中，我正... 查看详情

反应表单，提交对象，然后将其推送到数组

...属性，但我不知道该怎么做。这是我在视图中呈现的初始数据：contactArr 查看详情

在使用 node.js 完成所有承诺后，我想在 mongodb 中插入数据

】在使用node.js完成所有承诺后，我想在mongodb中插入数据【英文标题】：iwanttoinsertdatainmongodbafterallpromiseshavebeendonebyusingnode.js【发布时间】：2016-05-0511:02:12【问题描述】：我通过使用Promise将错误推送到数组中，但在将错误推送到... 查看详情