Firebase在加载视图之前未接收数据 - 填充之前返回空数组

Question

在下面的代码中,我将每个项目的密钥和一个电子邮件地址保存在一个表中,并使用所述密钥检索要从原始表中获取的对象.我可以看到rawList当我在console.log中时项目被放入数组中,但是函数this.cartList在它有任何内容之前返回,因此视图不会接收任何数据.我怎样才能让它在返回之前this.cartList等待rawList满满？

 ionViewWillEnter() {
    var user = firebase.auth().currentUser;
    this.cartData.getCart().on('value', snapshot => {
        let rawList = [];
        snapshot.forEach(snap => {
          if (user.email == snap.val().email) {
            var desiredItem = this.goodsData.findGoodById(snap.val().key);
            desiredItem.once("value")
            .then(function(snapshot2) {
              rawList.push(snapshot2);
            });
            return false
          }
        });
        console.log(rawList);
        this.cartList = rawList;
    });
  }

我已经尝试将this.cartList = rawList放在许多不同的位置(之前return false,甚至在.then语句内部,但这并没有解决问题.

Answer 1

rawList以下函数调用是异步的，并且您在有机会更新之前就超出了范围 ，因为此数据库调用需要相当长的时间：

desiredItem.once("value").then(function(snapshot2) {
    rawList.push(snapshot2);
});

snapshot2.val()当您应该推送以获取原始值时，您还将快照直接推送到此列表。

以下是我修复您的代码的方法：

ionViewWillEnter() {
    var user = firebase.auth().currentUser;
    this.cartData.getCart().on('value', snapshot => {
        // clear the existing `this.cartList`
        this.cartList = [];
        snapshot.forEach(snap => {
          if (user.email == snap.val().email) { 
            var desiredItem = this.goodsData.findGoodById(snap.val().key);
            desiredItem.once("value")
            .then(function(snapshot2) {
              // push directly to the cartList
              this.cartList.push(snapshot2.val());
            });
          }
          return false;
        });
    });
  }