React-native和Firebase：等待Firebase数据 [英] React-native and Firebase: Wait for Firebase data

问题描述

我目前正在实施一个依赖Firebase数据的应用程序，然后才能继续。但是，我经常（除非特意等待）得到结果无法读取null 的属性[property]。我非常怀疑这是因为在我调用这个对象之前无法做出firebase请求。

现在我正在寻找实现rendez-vous的方法，或者一个障碍，实际上是在收到所有Firebase数据之前实现一个检查点的任何事情。有什么可以帮助我这样做，或任何图书馆，或任何反应原生库，帮助我实现这一目标？

我的代码如下所示： （Fb是firebase接口）

  @action 
 bookInterestedBike（）{
 this.bookedBikeNo = this .interestBikeNo; 
 this.downloadBikeObj（）; 
 this.updateBikeDataStartRide（）; 
 this.updateUserDataStartRide（）; 
 // 
 //这是firebase checkpoint / barrier应该发生的地方，除非获取这个数据，否则不应该取得进展！ 
 // 
 this.startTimer（）; 
 
 $ b $ action $ b $ downloadBikeObj（）{
 Fb.staticBikes.child（String（this.bookedBikeNo））。once（'value'，（bikeObj） => {
 this.bikeObj = bikeObj.val（）; 
 console.log（Save object is：）; 
 console.log（this.bikeObj）; 
}）; 
 
 
 updateBikeDataStartRide（）{
 var updateVals = {} 
 updateVals [this.interestBikeNo] = {
 bike_no：this.interestBikeNo，
 current_user：self，
 positionLat：this.usrLat，
 positionLng：this.usrLng 
}; 
 Fb.bikes.update（updateVals）; 
返回false; 
}; 
 
 updateUserDataStartRide（）{
 var updateVals = {} 
 updateVals [this.uuid] = {
 bike_no：this.bookedBikeNo，
 uuid：this .uuid // TODO：在部署
}中删除这个; 
 Fb.users.update（updateVals）; 
返回false; 
}; 
  

在另一个组件上，这是调用get的函数（所有数据来自<$在调用 navigateToSuccessBookedBike（）

<$ p $之前接收到c $ c> updateBookedBikeBegin（）
this.userStore.bookInterestedBike（）;
this.navigateToSuccessBookedBike（）;
}
updateBookedBikeBegin

解决方案

为了方便起见，使用promises over callbacks是最好的办法。



$ obj $（$）



$ b $ $ b .child（String（this.bookedBikeNo））
.once（'value'）
.then（bikeObj => {
this.bikeObj = bikeObj.val;
console.log（Save object is：）;
console.log（this.bikeObj）;
}）; //返回承诺
}


和compos e $ over $ $ c> bookInterestedBike 。 b $ b this.bookedBikeNo = this.interestBikeNo; （）=> this.updateBikeDataStartRide（））
.then（（（）=> this.updateUserDataStartRide（））$

this.downloadBikeObj（）
.then b $ b .then（（）=> this.startTimer（））;

$ / code>

参考：

https://firebase.googleblog.com/2016 /01/keeping-our-promises-and-callbacks_76.html

I am currently implementing an application which relies on Firebase data before it can continue. However, I often (unless I deliberately wait) get the result Cannot read property [property] of null. I very much suspect that this is because the firebase request could not be made before I call this object.

Now I am looking for methods to implement a rendez-vous, or a barrier, really anything that implements a checkpoint where all firebase data are received, before it continues. Is there anything in Javascript which helps me to do so, or any library, or any react-native library that helps me to achieve this?

My code looks as follows: (Fb is the firebase interface)

@action
  bookInterestedBike() {
    this.bookedBikeNo = this.interestBikeNo;
    this.downloadBikeObj();
    this.updateBikeDataStartRide();
    this.updateUserDataStartRide();
    //
    //This is where the firebase checkpoint / barrier should happen, and no progress should be made unless this data was fetched!
    //
    this.startTimer();
  }

@action
  downloadBikeObj() {
    Fb.staticBikes.child(String(this.bookedBikeNo)).once('value', (bikeObj) => {
      this.bikeObj = bikeObj.val();
      console.log("Save object is: ");
      console.log(this.bikeObj);
    });
  }

  updateBikeDataStartRide() {
    var updateVals = {}
    updateVals[this.interestBikeNo] = {
      bike_no: this.interestBikeNo,
      current_user: "self",
      positionLat: this.usrLat,
      positionLng: this.usrLng
    };
    Fb.bikes.update(updateVals);
    return false;
  };

  updateUserDataStartRide() {
    var updateVals = {}
    updateVals[this.uuid] = {
      bike_no: this.bookedBikeNo,
      uuid: this.uuid //TODO: remove this in deployment
    };
    Fb.users.update(updateVals);
    return false;
  };

On another component, this is the function that get's called (it is crucial that all data from updateBookedBikeBegin() is received before calling navigateToSuccessBookedBike()

  updateBookedBikeBegin() {
    this.userStore.bookInterestedBike();
    this.navigateToSuccessBookedBike();
  }

解决方案

For convenience using promises over callbacks is preferred for this situation. You need to return a promise in downloadBikeObj.

downloadBikeObj() {
    return Fb.staticBikes
      .child(String(this.bookedBikeNo))
      .once('value')
      .then(bikeObj => {
        this.bikeObj = bikeObj.val;
        console.log("Save object is: ");
        console.log(this.bikeObj);
      }); // return promise
}

And compose over the returned promise in bookInterestedBike.

bookInterestedBike() {
    this.bookedBikeNo = this.interestBikeNo;

    this.downloadBikeObj()
        .then(() => this.updateBikeDataStartRide())
        .then(() => this.updateUserDataStartRide())
        .then(() => this.startTimer());    
}

Reference:

https://firebase.googleblog.com/2016/01/keeping-our-promises-and-callbacks_76.html

这篇关于React-native和Firebase：等待Firebase数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！