向AsyncStorage的已有对象数组追加新对象失败，附代码求助

核心问题点 #

• 从AsyncStorage读取到的是JSON字符串，没有执行JSON.parse转成数组，直接赋值给state会导致后续扩展运算符操作异常；如果存储中不存在对应key，读取结果为null，没有做兜底处理。
• React的setState是异步更新逻辑，执行setStorageItems后立即访问storageItems拿到的还是更新前的旧值，追加新数据和存储操作拿的都是旧数组，自然写入失败。
• 没必要单独对单个新对象做JSON序列化，最后整体对数组做序列化即可，否则会导致存储的数组项是字符串格式，后续读取使用还要二次解析。
• 直接依赖state的旧值更新再写入存储的逻辑不合理，完全可以跳过state中间更新的异步等待，直接基于读取到的存储数据做修改后写入。

修复后代码 #

const [storageItems, setStorageItems] = useState([]);

const handleHabitCreation = async () => {
    setLoading(true);

    const newHabit = {
        name: name,
        color: updatedColor,
        days: daysCount,
        times: timesCount,
        reminder: selectedDate,
        description: description,
    };

    try {
        // 读取存储内容并转成数组，空值兜底为[]
        const jsonValue = await AsyncStorage.getItem('@habit');
        const existHabits = jsonValue ? JSON.parse(jsonValue) : [];
        // 直接基于读取到的旧数组生成新数组
        const newHabits = [...existHabits, newHabit];
        // 写入存储
        await AsyncStorage.setItem('@habit', JSON.stringify(newHabits));
        // 同步更新state
        setStorageItems(newHabits);
        
        setTimeout(() => {
            setLoading(false);
            navigation.pop(3);
        }, 2500);
    } catch (error) {
        console.error(error);
        setLoading(false);
    }
};

修复说明 #

• 读取存储后先做JSON解析，同时加空值兜底，保证拿到的一定是可操作的数组格式
• 跳过依赖异步state更新的逻辑，直接基于读取到的原始数据生成新数组，避免异步更新导致的取值错误
• 整个数组统一序列化后写入存储，数据格式更规范，后续读取直接一次解析即可使用
• 所有异步操作都放在同一个try catch块中，出错时可以统一处理，避免加载状态卡死

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