React Native购物车：如何在Async Storage中列出相同ID商品

你的问题确实出在购物车的渲染逻辑上，核心是getDataFromDB函数处理购物车数据的方式有误。

问题根源 #

原来的代码遍历商品列表Items，只要商品id存在于购物车id数组中，就将该商品添加到productData一次——这就导致哪怕购物车数组里有多个相同id，同一个商品也只会被添加一次，自然无法重复展示。

解决方案 #

修改getDataFromDB里生成productData的逻辑，改为遍历购物车id数组里的每一个id，逐个匹配对应的商品并添加到productData中，这样每个重复的id都会生成一个独立的商品条目：

const getDataFromDB = async id =>{
  let items = await AsyncStorage.getItem('cartItems');
  items = JSON.parse(items);
  if(items.length===0){
    Alert.alert(  
      "Ops",
      "The cart is empty",
      [
        {
          text: "Ok",
          onPress: () => navigation.navigate('Home'),
          style: "cancel"
        }
      ]
    );
  }else{
    let productData = [];
    if (items) {
      // 替换原来的Items.forEach逻辑
      items.forEach(itemId => {
        const matchedProduct = Items.find(data => data.id === itemId);
        if (matchedProduct) {
          productData.push(matchedProduct);
        }
      });
      setProduct(productData);
      getTotal(productData);        
    } else {
      setProduct(false);
      getTotal(false);
    }
  }
};

额外注意事项 #

• 列表key的唯一性：原来的renderProducts里用data.key作为元素key，重复商品的key会重复，导致React渲染警告。需要改成用索引或者组合id+索引作为key：

<TouchableOpacity
  key={`${data.id}-${index}`}
  onPress={() => navigation.navigate('ProductInfo', {productID: data.id})}
  // ...其他样式代码
>

• 删除逻辑适配：如果你的removeItemFromCart函数是删除所有相同id的条目，需要修改为只删除数组中第一个匹配的id（或者对应索引的id），这样才能单独删除重复商品中的某一个。示例：

const removeItemFromCart = async (targetId) => {
  let items = await AsyncStorage.getItem('cartItems');
  items = JSON.parse(items);
  // 找到第一个匹配的id的索引并删除
  const index = items.findIndex(id => id === targetId);
  if (index !== -1) {
    items.splice(index, 1);
    await AsyncStorage.setItem('cartItems', JSON.stringify(items));
    getDataFromDB(); // 更新购物车显示
  }
};

这样修改后，重复添加的商品就会在购物车中单独展示了。

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