React Native useState循环追加数组仅保留最后一项问题排查

React的useState状态更新是异步批处理的，且单次渲染周期内的状态值是闭包固定的，不会在同步代码执行过程中实时变更：

• 你在for循环里连续调用setItems时，每次读取到的items都是onReturn回调触发那一刻，当前渲染闭包里捕获的旧值，不是上一次setItems执行后的最新值。
• 以传入3个元素、初始items为空数组的场景为例：
  1. 第一次循环：执行setItems([...[], 元素1])，预期结果为[元素1]
  2. 第二次循环：读取到的items还是初始空数组，执行setItems([...[], 元素2])，直接覆盖上一次更新
  3. 第三次循环：读取到的items依旧是空数组，执行setItems([...[], 元素3])，再次覆盖前两次更新
• 最终React只会应用最后一次更新的结果，所以数组里只会保留传入的最后一个元素。

方案1：单次更新全量追加（推荐，性能最优） #

需求本身是把返回的itemArray所有元素整体追加到列表中，完全不需要循环多次调用状态更新函数，只需要一次合并即可，同时使用函数式更新保证拿到最新的原有状态：

const AddItemToBill = (navigation) => {
    navigation.navigate('AddItemToBill', {
        onReturn: (itemArray) => {
            // 函数式更新的入参是当前最新的状态值，从根源避免闭包旧值问题
            setItems(prevItems => [...prevItems, ...itemArray]);
        },
        navigation
    })
};

这种方式只会触发一次组件重渲染，性能远高于循环多次调用set方法。

方案2：循环处理场景下使用函数式更新 #

如果你确实需要逐个处理元素（比如要对每个元素做格式转换、合法性校验后再追加），循环时不要直接读取闭包里的items，而是通过函数式更新的入参获取上一次更新后的最新状态：

onReturn: (itemArray) => {
    for (let i = 0; i < itemArray.length; i++) {
        const element = itemArray[i];
        // 每次更新都基于上一次的最新结果追加，不会出现覆盖问题
        setItems(prevItems => [...prevItems, element]);
    }
}

补充说明：原有代码里的console.log('Items: ' + JSON.stringify(array))打印的是传入的原数组，不是更新后的items状态；且状态更新是异步的，调用setItems后立刻打印也拿不到最新值，需要通过useEffect监听items变化才能获取更新后的结果。

内容的提问来源于stack exchange，提问作者newdevv2