在for循环中未正确更新React本机密钥

React native key not updating properly in for-loop?

本文关键字：更新 React 本机密钥 for 循环更新时间：2023-09-26

我的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元素

的属性值