我已经在react-native
中构建了一个应用程序,我正在使用react-redux
将数据存储在我的购物车中。
目前,当我添加一个产品,让我们说苹果到我的购物车。我的购物车将包含1 x苹果,如果我添加相同的产品到我的购物车,我将有2 x苹果。
问题
但是,如果我试图删除1 x苹果,我的购物车删除所有的苹果在我的购物车。
问题
如何在-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>
购物车屏幕.js
<Products products={appels} onPress={this.props.addItemToCart}/>
购物车屏幕.js|处理从推车中取出产品
const mapDispatchToProps = (dispatch) =>{
return{
removeItem:(product) => dispatch ({
type:'REMOVE_FROM_CART' , payload: product
})
}
}
4条答案
按热度按时间ogq8wdun1#
我认为您在添加同一产品的多个副本时,会在状态中保留同一产品的副本。因此,您应该只过滤第一个匹配项,而不是所有匹配项:
这应该可以让它工作,同时保持您当前的设计。
但是,如果用户从列表底部删除重复的产品,UI可能不直观,因为列表中产品的第一个副本将从UI中删除,因此您可能需要调整
removeItem
操作有效负载,以包含要删除的产品的索引,而不是产品对象。更好的方法可能是使用
qty
变量来指示多个副本,这将减少状态大小,并使在购物车屏幕上显示数量列(而不是显示重复的产品)变得更容易:如果您使用此新设计,您的
CartScreen.js
也需要相应地修改。fcwjkofz2#
当做
返回状态。过滤器(cartItem=〉cartItem.id!== action.payload.id)
您基本上是在说,返回除此cartItem之外的所有内容。
那不是你想要的。你想要给予:
下面是您的操作:
然后,您必须找到您的项目并更新其数量:
ygya80vv3#
只需对“不受欢迎”执行此操作
ldioqlga4#
那么,您可能需要在操作负载中传递数量或递增/递减标志。
操作创建者可以接受递增/递减参数
现在在你的减速器里