React Native AsyncStorage数据覆盖问题：仅显示最新存储记录

你遇到的核心问题是每次添加数据时都覆盖了之前的购物车记录，而非在已有数组基础上追加。我帮你梳理下代码里的关键问题，再给出修复后的版本：

一、保存数据函数的核心错误 #

1. 空数组初始化导致覆盖：你在saveData里每次都声明var product= []，后续仅将当前item推送到这个空数组，完全丢弃了之前存储的购物车数据。
2. 异步逻辑处理不当：AsyncStorage.getItem是异步操作，你需要先解析出已有的购物车数据，再追加新item后重新保存。另外你写的AsyncStorage.setItem("Cart",JSON.stringify(product), console.log(...))语法错误，第三个参数应为回调函数，不能直接传入console.log。
3. 拼写错误：catch块里的alert(eror)应该是alert(error)。

二、获取数据的小问题 #

1. 生命周期方法过时：componentWillMount已被React Native弃用，建议改用componentDidMount。
2. 忽略setState异步特性：你在setState后直接console.log(this.state.cartItems)，此时状态还未更新，应把console.log放在setState的回调函数里。

三、FlatList渲染的错误 #

FlatList的_renderItem回调本身接收单个item对象，你不需要再用this.state.cartItems.map，这会导致每个item都渲染整个列表，出现重复或错误的渲染结果。

修复后的saveData函数 #

saveData = async (item) => {
  console.log("We are in Save function");
  try {
    // 先获取已有的购物车数据
    const existingCart = await AsyncStorage.getItem("Cart");
    let cartArray = [];
    
    if (existingCart) {
      // 解析已有数据为数组
      cartArray = JSON.parse(existingCart);
    }
    
    // 构造新商品对象
    const newItem = {
      id: item.id,
      title: item.title,
      image: item.image,
      price: item.price,
      description: item.description,
      categoryTitle: item.categoryTitle,
    };
    
    // 追加新商品到购物车数组
    cartArray.push(newItem);
    
    // 保存更新后的数组
    await AsyncStorage.setItem("Cart", JSON.stringify(cartArray));
    console.log("item added" + JSON.stringify(cartArray));
    alert("item added to cart");
  } catch (error) {
    alert(error);
  }
};

修复后的获取数据逻辑（改用componentDidMount） #

componentDidMount() {
  this.getCartData();
}

getCartData = async () => {
  try {
    const res = await AsyncStorage.getItem("Cart");
    console.log("res value is------" + JSON.stringify(res));
    if (!res) {
      alert("your cart is empty");
      this.setState({ cartItems: [] });
    } else {
      const cartItems = JSON.parse(res);
      this.setState({ cartItems }, () => {
        console.log(JSON.stringify(this.state.cartItems));
        alert("get Cart items" + JSON.stringify(this.state.cartItems));
      });
    }
  } catch (error) {
    alert(error);
  }
};

修复后的_renderItem方法 #

_renderItem({ item }) {
  console.log("we are in _renderItem function");
  console.log(item.id);
  return (
    <View style={{ flex: 1, flexDirection: 'row' }}>
      <Image style={{ height: 90, width: 90 }} source={{ uri: item.image }} />
      <View style={{ flexDirection: 'column' }}>
        <Text>{item.id}</Text>
        <Text>{item.title}</Text>
        <Text>{item.categoryTitle}</Text>
      </View>
    </View>
  );
}

另外要注意：在FlatList的props里要正确设置data={this.state.cartItems}和renderItem={this._renderItem}，如果是类组件，记得给_renderItem绑定this（比如在constructor里绑定或使用箭头函数）。

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