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

Question

在下面的代码中，我将每个项目的键和一个电子邮件地址保存在一个表中，并使用所述键检索要从原始表中获取的对象。当我使用 console.log 时，我可以看到这些项目被放入 rawList 数组，但是该函数在它包含任何内容之前返回 this.cartList，所以view 没有收到任何数据。我怎样才能使 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;
        });
    });
  }