Question

我已经在react-native中构建了一个应用，并且正在使用react-redux将数据存储在购物车中。

当前，当我添加产品时，可以在购物车中说苹果。我的购物车将包含1x苹果，如果我将相同的产品添加到购物车中，我将拥有2x苹果。

问题

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

问题

如何在-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

这样做

返回state.filter（cartItem => cartItem.id！== action.payload.id）

您基本上是说，具体返回此cartItem之外的所有内容。

这不是您想要的。你想给：

要从有效载荷中移除的数量。
产品的ID。

这是您的操作：

<h:inputText id="lastName" maxlength="30" styleClass="InputBoxMedium" value="#{searchBean.lastName}" onkeyup="checkAllEmptyField('Search', 'searchActive', 'searchInactive', 5)">
                                        <f:validator validatorId = "searchValidator"/>
                                    </h:inputText>

然后，您必须找到商品并更新数量：

dispatch({type:'REMOVE_FROM_CART' , payload: {product, qty} })

Answer 2

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

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

这应该在保持当前设计的同时使其起作用。

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

更好的方法可能是使用qty变量来表示多个副本，这将减小状态大小并使其更容易在购物车屏幕上显示数量列（而不是显示重复的产品）：< / p>

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。

Answer 3

好吧，您可能需要在操作有效载荷中传递数量或增量/减量标志。

您的动作创建者可以接受用于增加/减少的参数

const updateItem = dispatch=>(increment=true)=>{
  dispatch({type:'UPDATE_IN_CART' , payload: product, increment})
}

现在在减速器中

case 'UPDATE_IN_CART':{
   const {increment, payload}= action;  //ES6 destructing
   const updatedCart = state.map((cartItem)=>{
      if(cartItem.id !== payload.id )){
          cartItem.quantity = increment?cartItem.quantity+1:cartItem.quantity-1 //will handle increment/decrement; 
      }
      return cartItem;
   })
   return updatedCart;
}

Redux从购物车中移除一项

3 个答案: