javascript - React native key 在 for 循环中未正确更新？

Question

我的 React-native 应用程序中有一个函数，在该函数中我循环遍历数组中的键并从 Firebase 中提取相应的引用。

但是，在我的 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)
            });
        });
    }
}

Answer 1

这里的问题是 Firebase 的异步特性。您的 for 循环不会等待 firebase 调用完成，因此它会不断更新键值。

除了使用 key 变量之外，您还应该使用 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());