Set state once all data is pushed to array

Question

I am trying to make a 'facebook kind of newsfeed' in React with Firebase Firestore. In the componentDidMount I first get the friendslist and per friend I will get their activities which I push to an empty array and sort() + reverse() the id's which are timestamps. This way the newest activity will be first in the array. Once ALL the items are pushed to the array, I want to set the state with the array. This is the code that I have:

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

The problem is that the array isn't set correctly or that it maybe is set before all the items are pushed. This is the log that I get:

It looks like it is loaded but it is empty between the brackets. If I console.log This.state.activity I get the same result. Can someone tell me how to fix this? And how can I setState once all the activities are pushed to the empty array?

Vincas Stonys · Accepted Answer · 2017-11-27 15:28:00Z

2

You get a Promise when you make a call to API, but you set this.setState({ activityKeys }) before the call has completed. In other words, you must chain another .then() after the data has been received, in which you will call this.setState({ activityKeys }). What makes it a little difficult is that you're creating many Promises when iterating with forEach, and you need to wait for each of them to complete. You could save them all to list, and use Promise.all to wait for their completion and return it from the previous .then. Read more on the promises: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

answered Nov 27, 2017 at 15:28

Vincas Stonys

1,1351 gold badge16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Set state once all data is pushed to array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related