即使您在 .then 中，Setstate 也会完成

Question

我对此感到非常困惑。我知道这与异步性质有关，但我无法让它按照我需要的方式运行。
我需要 firebase.set 运行。完成后 this.setstate 运行，一旦完成下一个运行。

    .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'
        })
      });
  })

目前 console.log(2) 在 console.log(1) 之前运行。我希望 this.setstate 在它移动到下一个 .then 之前解决

如何做到这一点？

Answer 1

出于性能原因，React 批量状态更新。 在您设置为更新家庭的情况下，您可以使用本地范围的对象来获取中间结果

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

您也可以使用 async await 来解决这个问题，但这需要进行更多更改，

希望对你有帮助