対応するネイティブキーがfor-loopで正しく更新されませんか？

Question

私は配列内のキーをループし、それぞれのリファレンスをFirebaseから引き出す、React-nativeアプリケーションに関数を持っています。

しかし、私のforループでは、適切なrefが常に評価されますが、forループ自体の中のキー値は常に​​3であるため、totalItemsCompleted（これはuserItemsArrayのキーの長さに等しい）です。常に同じ

listenForItems(itemsRef) { 
    var userItemsArray = { 
     0: [1], 
     1: [5, 6], 
     2: [8, 9, 10], 
     3: [11, 12, 13] 
    }; 

    var pastItems = []; 
    var currentItems = []; 

    for (var key in userItemsArray) { 
     console.log("KEY1 " + key); //key is correct here 
     var itemRef = itemsRef.child(key); 
     itemRef.on('value', (snap) => { 
      var totalItemsOnList = snap.val().items.length; 
      var totalItemsCompleted = userItemsArray[key].length; 
      console.log("KEY2 " + key); //key is always 3 here 
      if (totalItemsOnList===totalItemsCompleted) { 
       pastItems.push({ 
        title: snap.val().title, 
      }); 
      } 
      else { 
       currentItems.push({ 
        title: snap.val().title, 
       }); 
      } 

      this.setState({ 
       currentItems: this.state.currentItems.cloneWithRows(currentItems), 
       pastItems: this.state.pastItems.cloneWithRows(pastItems) 
      }); 
     }); 
    } 
} 

Answer 1

の属性値としてkeyを格納についてです。あなたのforループはfirebase呼び出しが終了するのを待っていないので、キー値を更新し続けます。

あなたはこのようなあなたのfirebaseスナップショットのキーを使用する必要がある重要な変数を使用してのINSEAD：

var itemRef = itemsRef.child(key); 
    itemRef.on('value', (snap) => { 
     var totalItemsOnList = snap.val().items.length; 
     var totalItemsCompleted = userItemsArray[snap.key()].length; 
     console.log("KEY2 " + snap.key()); 

Answer 2

3に同じ流れを簡単に次のコードで再現することができます。

for(var i= 0; i< 3; i++) setTimeout(()=> alert(i) ,i * 1000) 

あなたが匿名関数の複数のインスタンスを作成しているが、それは適切なにロックされていませんという値を使用しますが、代わりに '名前で'を参照してください。 ハンドラのどれかが呼び出された変数keyには、ループ中に最後に取り込まれた値が入っています。

これに対処する方法はいくつかあります。 最も簡単な1が自己呼び出された匿名関数にハンドラの作成をラップすることです：

temRef.on('value', ((keyFixedValue) => { 
return (snap) => {/*all other code*/} 
})(key)) 

もう一つの可能​​な方法は、ここでの問題は、firebaseの非同期性である適切なHTML要素