javascript - React Native 和 Firebase promise - 对渲染产生奇怪的副作用

Question

我在代码中使用了两个链接的 Firebase 请求。第一个是获取所有评论，然后迭代所有结果，为循环中的每个元素触发第二个 firebase 请求。

循环结束后，我使用 setState 使用新数据更新了 state。该更新使我的 GUI 变得透明，如下所示:

底部部分每次都是随机透明的，有时渲染有点可见，有时根本不可见。当我删除 setState block 时，一切都很好。

有问题的代码:

    getReviews() {
      let reviewData = {}
      let vendorId = this.props.item.vendor_id
      let product = this.props.item.key

      firebase.database().ref('u_products/' + vendorId + '/' + product + '/reviews/').once('value', (data) => {
        reviewData = data.val()
        if (!reviewData) {
          this.setState({
            loadedReviews: true
          })
          return
        } else {
          for (var key in reviewData) {
            firebase.database().ref('users/' + reviewData[key].poster_uid + '/').once('value', (data) => {
              let userData = data.val()
              if (userData) {
                this.getUserImageUrl()
                 ...
              }
            })
          }
          this.state.reviewData = reviewData
            this.setState({
              dataSource: this.state.dataSource.cloneWithRows(reviewData),
              loadedReviews: true,
            })
        }
      })
    }

预期行为是第一个 Firebase 请求 -> 第二个请求迭代第一个请求的所有结果 ->setState。

其他人也有这个问题吗？

Answer 1

firebase的.once()返回一个Promise，所以你需要做的是创建一个Promise数组，然后调用Promise.all(array) .then((arrayOfData) => { ... });

您现在可以处理结果数组，然后调用 .setState()

这是一个模型:

/* firebase mockup */
function Result(url) {
  this.url = url;
  this.once = function(param, callback) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        var data = {
          val: () => {
            return this.url + " query result";
          }
        };
        resolve(data);
      }, Math.random() * 500 + 1000);
    });
  };
}
var firebase = {
  database: function() {
    return firebase;
  },
  ref: function(url) {
    return new Result(url);
  }
};

var reviewData = {
  "test": {
    poster_uid: "testData"
  },
  "2nd": {
    poster_uid: "2ndData"
  }
};

// ACTUAL IMPORTANT CODE BELOW #################

var arrayOfPromises = [];
for (var key in reviewData) {
  arrayOfPromises.push(firebase.database().ref('users/' + reviewData[key].poster_uid + '/').once('value'));
}
Promise.all(arrayOfPromises).then(function(arrayOfResults) {
  arrayOfResults.map((data, i) => {
    let userData = data.val();
    if (userData) {
      console.log(i, userData);
    }
  });
  console.log("setting state now");
});