Redux 从购物车中删除一件商品

Question

我在 react-native 中构建了一个应用程序，我正在使用 react-redux 将数据存储在我的购物车中。

目前，当我添加产品时，让我说苹果到我的购物车。我的购物车将包含 1 个苹果，如果我将相同的产品添加到我的购物车，我将有 2 个苹果。

---

问题

但如果我尝试移除 1x 个苹果，我的购物车会移除我购物车中的所有苹果。

---

问题

如何在 -1 之前移除购物车中的商品？

cartitems.js

case 'REMOVE_FROM_CART':
            return state.filter(cartItem=>cartItem.id !== 
                action.payload.id )

CartProducts.js 组件

<View key={products.index} style={styles.appels}>
      <View style={styles.iconContainer}> 
           <Icon name={products.item.icon} color="#DD016B" size={25} />
      </View>
      <View style={styles.text}>
           <Text style={styles.name}>
                {products.item.name}
           </Text>

           <Text style={styles.price}>
                € {products.item.price}
           </Text>
    </View>
    <View style={styles.buttonContainer}>
          <TouchableOpacity onPress={() => this.props.onPress(products.item)} > 
              <Icon style={styles.button} name="ios-remove" color="white" size={25} />
           </TouchableOpacity>
        </View>
     </View>

CartScreen.js

<Products products={appels} onPress={this.props.addItemToCart}/>

CartScreen.js |处理从购物车中删除产品

const mapDispatchToProps = (dispatch) =>{
    return{
        removeItem:(product) => dispatch ({
            type:'REMOVE_FROM_CART' , payload: product
        })  
    }
}

Answer 1

我相信当添加同一产品的多个副本时，您会在状态中保留同一产品的副本。因此，您应该只过滤第一个匹配项而不是所有匹配项:

case 'REMOVE_FROM_CART': {
  const index = state.findIndex(item => item.id === action.payload.id);
  return state.filter((_, i) => i !== index);
}

这应该可以让它正常工作，同时保持您当前的设计。

但是，如果用户从列表底部删除重复的产品，则 UI 可能不直观，因为列表中产品的第一个副本将从 UI 中删除，因此您可能需要调整您的removeItem 操作负载包含要删除的产品索引而不是产品对象。

更好的方法可能是使用 qty 变量来指示多个副本，这将减小状态大小并更容易在购物车屏幕上显示数量列(而不是显示重复的产品):

case 'ADD_ITEM_TO_CART':
  if (state.some(item => item.id === action.payload.id)) {
    // increase qty if item already exists in cart
    return state.map(item => (item.id === action.payload.id ? { ...item, qty: item.qty + 1 } : item));
  }
  return [...state, { ...action.payload, qty: 1 }]; // else add the new item to cart

case 'REMOVE_FROM_CART':
  return state
    .map(item => (item.id === action.payload.id ? { ...item, qty: item.qty - 1 } : item))
    .filter(item => item.qty > 0);

如果您使用这种新设计，您的 CartScreen.js 也需要进行相应的修改。