React Native Expo中AsyncStorage无法获取购物车玩具数据求助

存储数据的错误点 #

1. JSON.stringify 使用错误：
   你直接把多个参数传给JSON.stringify，但它的第一个参数必须是要序列化的对象，后续参数是可选的replacer和格式化空格，不是单独的字段。这种写法只会序列化第一个参数id，其他商品数据都会丢失。

2. 购物车数据结构错误：
   用ToyProduct作为存储key，每次添加新商品都会覆盖之前的数据。购物车应该存储商品数组，才能支持多商品同时存在。

3. 缺失错误处理：
   setData的catch块是空的，出现存储错误时无法排查问题，应该打印错误信息。

修正后的存储代码 #

const SlugFormat = ({id, image, name, price, longDesc, seller, type}) => {
    // 假设你已定义quantity状态，比如const [quantity, setQuantity] = useState(1);
    const addToCart = async () => {
        try {
            // 1. 先读取现有购物车数据
            const existingCart = await AsyncStorage.getItem('CartItems');
            const cartItems = existingCart ? JSON.parse(existingCart) : [];
            
            // 2. 检查商品是否已在购物车，可选择更新数量或重复添加
            const existingItemIndex = cartItems.findIndex(item => item.id === id);
            if (existingItemIndex !== -1) {
                cartItems[existingItemIndex].quantity += quantity;
            } else {
                cartItems.push({id, name, price, quantity, image});
            }
            
            // 3. 序列化数组并存储
            await AsyncStorage.setItem('CartItems', JSON.stringify(cartItems));
            console.log('商品已加入购物车');
        } catch(e) {
            console.error('存储购物车数据失败:', e);
        }
    }

    return (
        // 页面布局代码，比如点击按钮触发添加操作
        <Button title="加入购物车" onPress={addToCart} />
    )
}

获取数据的错误点 #

1. 异步函数未执行且错误访问属性：
   getData是异步函数，但你直接在<Text>里写getData.name——既没有调用这个函数，也没有处理Promise返回值，页面只会显示函数的字符串形式，根本拿不到实际数据。

2. 未用状态管理存储数据：
   React组件渲染依赖状态，异步获取的数据必须存在state里，才能触发组件更新并展示数据。

修正后的购物车组件代码 #

import { useState, useEffect } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const Cart = () => {
    const [cartItems, setCartItems] = useState([]);

    // 组件挂载时加载购物车数据
    useEffect(() => {
        const fetchCartData = async () => {
            try {
                const storedCart = await AsyncStorage.getItem('CartItems');
                if (storedCart) {
                    setCartItems(JSON.parse(storedCart));
                }
            } catch(e) {
                console.error('获取购物车数据失败:', e);
            }
        };
        fetchCartData();
    }, []);

    // 控制台打印数据，用于验证存储结果
    useEffect(() => {
        console.log('当前购物车数据:', cartItems);
    }, [cartItems]);

    return (
        <View style={styles.container}>
            {cartItems.length === 0 ? (
                <Text style={styles.emptyText}>购物车为空</Text>
            ) : (
                <FlatList
                    data={cartItems}
                    keyExtractor={item => item.id.toString()}
                    renderItem={({item}) => (
                        <View style={styles.itemRow}>
                            <Text style={styles.itemName}>{item.name}</Text>
                            <Text>价格: ${item.price}</Text>
                            <Text>数量: {item.quantity}</Text>
                        </View>
                    )}
                />
            )}
        </View>
    )
}

const styles = StyleSheet.create({
    container: { flex: 1, padding: 15 },
    emptyText: { textAlign: 'center', marginTop: 50, fontSize: 16 },
    itemRow: { paddingVertical: 10, borderBottomWidth: 1, borderColor: '#eee' },
    itemName: { fontSize: 16, fontWeight: '500' }
});

验证存储数据的方法 #

1. 在存储和读取函数中添加console.log，直接查看数据是否正确。
2. 使用Expo DevTools：打开开发者工具后，左侧菜单找到Async Storage，可直接查看所有存储的key和对应的值。

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