向useState对象数组添加元素时被覆盖的技术问题求助

问题根源 #

你遇到的数组被覆盖问题，核心原因是异步操作的闭包陷阱：

• 遍历asyncStorageKeys时，所有getDataObject异步函数几乎同时启动，此时它们捕获到的habits状态都是初始的空数组（或同一轮渲染的旧值）。
• 当每个异步读取操作完成后，调用setData([...data, ...])时，data还是最初的旧状态，导致每次都是把新元素加到空数组里，直接覆盖了之前的状态更新。

解决方案一：使用函数式状态更新（推荐） #

修改getDataObject，改用React提供的函数式更新方式，这种方式会自动传入当前最新的状态值，确保每次更新都基于最新数组：

export const getDataObject = async (key, setData) => {
  try {
    const jsonValue = await AsyncStorage.getItem(key);
    if (jsonValue != null) {
      // 函数式更新：prevData是当前最新的状态数组
      setData(prevData => [...prevData, JSON.parse(jsonValue)]);
    }
  } catch (e) {
    console.error('Error returning data object in AsyncStorage, error: ' + e);
  }
};

调用时无需再传递habits状态：

asyncStorageKeys.forEach(key => { getDataObject(key, setHabits); });

解决方案二：批量获取后一次性更新 #

如果希望减少状态更新次数，也可以先批量读取所有数据，再一次性设置状态，这种方式更高效：

// 封装批量加载逻辑
const loadHabits = async () => {
  try {
    // 并行读取所有key对应的数据
    const habitJsonList = await Promise.all(
      asyncStorageKeys.map(key => AsyncStorage.getItem(key))
    );
    // 过滤无效数据并解析为对象
    const parsedHabits = habitJsonList
      .filter(json => json !== null)
      .map(json => JSON.parse(json));
    // 一次性更新状态
    setHabits(parsedHabits);
  } catch (e) {
    console.error('Error loading habits from AsyncStorage, error: ' + e);
  }
};

// 在useEffect中触发加载（根据实际依赖调整）
useEffect(() => {
  loadHabits();
}, [asyncStorageKeys]);

为什么函数式更新能解决问题？ #

React的状态更新函数（即setData(prev => ...)的形式）会在每次更新时传入当前最新的状态值，不管异步操作何时完成，都能基于最新的数组添加新元素，彻底避免闭包导致的旧状态复用问题。

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