Question

我的问题与this one有点类似。

但有点不同的是我在循环中调用异步函数。

for(var i =0; i < finalArray.length; i++){
  this.getFireStorePayment(code, recentParentId, recentBatchId, mobileNo, 'Processed');
}

它运行正常，但在函数中，我正在填充正在DOM中呈现的数组。

此：

getFireStorePayment(code, recentParentId, recentBatchId, mobileNo, paymentStatus){
  return new Promise(function (resolve, reject) {
      db.collection('batches').doc(recentParentId).collection('files').doc(recentBatchId).collection('data').where('mobile', '==', mobileNo).limit(1).get().then(function(paymentSnapshot){
          if (paymentSnapshot.size > 0) {
              paymentSnapshot.forEach(paymentDoc => {
                var paymentId = paymentDoc.id;
                if (code !== '0') {
                  var docData = paymentDoc.data();

                  //Following is Array I am populating - partialArray
                  partialArray.push(docData);
                }
              })
          }else{
            console.log("DOC NOT FOUND");
          }
          return resolve();
      })
  }) 
}

这是DOM渲染方法：

partialArray.map((heading, index) => {
  return(<div className="partial-number" key={index}>
      <img src={heading.profile_picture} width="30px" height="30px" />
      <span className="text-small text-purple text-block-level">{heading.name}</span>
      <span className="text-small text-red text-block-level">{heading.mobile_no}</span>
    </div>)
})

问题是在填充数组之前渲染DOM。我无法设置状态来检查，因为有一个循环，它可以是任何大小。

我在哪里可以设置状态？

检查所有承诺解决的循环 - Reactjs javascript

0 个答案: