我的React原生应用程序中有一个函数,在该函数中,我循环遍历数组中的键,并从Firebase中提取相应的ref。
然而,在我的for循环中,尽管总是计算正确的ref,但for循环本身内部的键值总是3,因此totalItemsCompleted
(等于userItemsArray
中键值的长度)总是等于3。
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)
});
});
}
}
这里的问题是firebase的异步性质。您的for循环没有等待firebase调用完成,因此它会不断更新键值。
使用关键变量的插图你应该使用你的firebase快照的关键,如下所示:
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());
下一个代码可以很容易地再现相同的流:
for(var i= 0; i< 3; i++) setTimeout(()=> alert(i) ,i * 1000)
尽管您正在创建多个匿名函数实例,但它并没有锁定在适当的key
值上,而是引用其"按名称"。因此,任何一个处理程序调用的变量key
都包含它在循环中得到的最后一个值。
有不同的方法来处理它。最简单的方法是将处理程序的创建包装成自调用的匿名函数:
temRef.on('value', ((keyFixedValue) => {
return (snap) => {/*all other code*/}
})(key))
另一种可能的方法是将key
存储为适当的HTML元素