Setstate completes after even thou it's in a .then

Question

I'm very confused on this. I know it has to do with the async nature but I'm not able to get this to function the way I need it to.
I need the firebase.set to run. When that is completed then this.setstate to run, once that is completed the next then to run.

    .then(keyUid => {
      let updatedFamily = {...family, [keyUid]: [firstHousehold, lastHousehold, householdDropdown]};

      this.props.firebase.db.ref('organization/' + currentOrganization + '/members/' + keyUid ).set(
        {
            first: firstHousehold,
            last: lastHousehold,
            phone: phone,
            email: email,
            address: address,
            address2: address2,
            city: city,
            zip: zip,
            headOfHousehold: headOfHousehold,
          }, (error) => {
               if(error){
                  console.log(error);
               }
               else{
                    this.setState({ family: updatedFamily }, () => console.log(1));
                }
        })
    })
    .then(newHouseholdUid => {
      console.log(2);
      Object.keys(family).forEach(key => {
        this.props.firebase.db.ref('organization/' + currentOrganization + '/members/' + key ).update({
          family: 'howdly'
        })
      });
  })

Currently console.log(2) runs BEFORE console.log(1). I would expect for this.setstate to resolve before it moves on to the next .then

How can achieve this?

ibtsam · Answer 1 · 2019-10-13T04:56:33.107

React batches state updates for performance reasons. In your case the state you are setting to updatedFammily, you can use a locally scoped object to get the intermediate results

  let res = {}
  ...


    .then(keyUid => {
  let updatedFamily = {...family, [keyUid]: [firstHousehold, lastHousehold, householdDropdown]};
  res.updatedFamily = updatedFamily;

  this.props.firebase.db.ref('organization/' + currentOrganization + '/members/' + keyUid ).set(
    {
        first: firstHousehold,
        last: lastHousehold,
        phone: phone,
        email: email,
        address: address,
        address2: address2,
        city: city,
        zip: zip,
        headOfHousehold: headOfHousehold,
      }, (error) => {
           if(error){
              console.log(error);
           }
           else{
                this.setState({ family: updatedFamily }, () => console.log(1));
            }
    })
})
.then(() => {
  console.log(2);
  Object.keys(res.updatedFamily).forEach(key => {
    this.props.firebase.db.ref('organization/' + currentOrganization + '/members/' + 
   key ).update({
      family: 'howdly'
    })
  });
  })

You can also use async await to get around this but that would require changing bit more,

Hope it helps

This wouldn't work because updatedFamily is nested in the firebase call no? In example when I console.log it it's undefined @ibtsam — FabricioG, Oct 12 '19 at 23:40
@FabricioG I have updated my answer for a work around please check — ibtsam, Oct 13 '19 at 04:57

Setstate completes after even thou it's in a .then

1 Answers1