我为购物应用程序创建了购物车组件,但遇到一个问题,当我更新产品数量时,它会更新总价,而不是商品价格(末尾为图片),我的代码在下面
reducer.js
if (action.type === ADD_TO_CART) {
let addedItem = state.jeans.find((item) => item.id === action.id);
let existed_item = state.addedItems.find((item) => action.id === item.id);
if (existed_item) {
addedItem.quantity += 1;
return {
...state.jeans,
total: state.total + addedItem.price,
};
} else {
addedItem.quantity = 1;
let newTotal = state.total + addedItem.price;
return {
...state,
addedItems: [...state.addedItems, addedItem],
total: newTotal,
};
}
}
//INSIDE CART COMPONENT
if (action.type === ADD_QUANTITY) {
let addedItem = state.jeans.find((item) => item.id === action.id);
addedItem.quantity += 1;
let newTotal = state.total + addedItem.price;
return {
...state,
total: newTotal,
};
}
if (action.type === SUB_QUANTITY) {
let addedItem = state.jeans.find((item) => item.id === action.id);
//if the qt == 0 then it should be removed
if (addedItem.quantity === 1) {
let new_items = state.addedItems.filter((item) => item.id !== action.id);
let newTotal = state.total - addedItem.price;
return {
...state,
addedItems: new_items,
total: newTotal,
};
} else {
addedItem.quantity -= 1;
let newTotal = state.total - addedItem.price;
return {
...state,
total: newTotal,
};
}
这就是我的减速器,我在其中添加了更新数量的功能
cart.js
Footer = () => {
return (
<View style={styles.totalContainer}>
<Text style={styles.textTotal}>Total:</Text>
<Text style={styles.total}>Rs {this.props.total}</Text>
</View>
);
};
render() {
let addedItems =
this.props.items && this.props.items.length ? (
<FlatList
data={this.props.items}
key={(items) => items.id.toString()}
numColumns={2}
ListFooterComponent={this.Footer}
renderItem={({ item }) => (
<View style={styles.cartContainer}>
<TouchableOpacity style={styles.button}>
<MaterialCommunityIcons
name="delete-circle-outline"
size={28}
onPress={() => this.props.removeItem(item.id)}
/>
</TouchableOpacity>
<Image style={styles.image} source={item.image} />
<View style={{ width: 150 }}>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.subTitle} numberOfLines={1}>
{item.subTitle}
</Text>
</View>
<Text style={styles.quantity} numberOfLines={2}>
{item.quantity}
</Text>
<Text style={styles.price}>Rs {item.price}</Text>
<TouchableWithoutFeedback>
<MaterialCommunityIcons
style={styles.iconUp}
size={20}
name="plus-circle-outline"
onPress={() => this.props.addQuantity(item.id)}
/>
</TouchableWithoutFeedback>
<MaterialCommunityIcons
style={styles.iconDown}
size={20}
name="minus-circle-outline"
onPress={() => this.props.subtractQuantity(item.id)}
/>
</View>
)}
/>
) : (
<View style={styles.emptyContainer}>
<Text style={styles.empty}>There is Nothing in your Cart</Text>
</View>
);
return (
<View style={styles.container}>
<View style={styles.order}>
<Text style={styles.orderText}>You Orders:</Text>
</View>
<View>{addedItems}</View>
</View>
);
}
}
const mapStateToProps = (state) => {
return {
items: state.clothes.addedItems,
total: state.clothes.total,
};
};
const mapDispatchToProps = (dispatch) => {
return {
removeItem: (id) => dispatch(removeItem(id)),
addQuantity: (id) => dispatch(addQuantity(id)),
subtractQuantity: (id) => dispatch(subtractQuantity(id)),
};
};
这是我的购物车代码,在这里我面临另一个问题,即我的页脚功能正在显示,如果我添加更多产品,则平面列表无法正常工作。平面列表仅显示3个产品,其他产品将添加在它们的上方。>
有人可以帮助我,告诉我怎么回事吗?
答案 0 :(得分:0)
您没有在任何地方更新价格
您可以像下面这样
<Text style={styles.price}>Rs {item.price*item.quantity}</Text>
或者,如果您希望这些值处于redux状态,请考虑在化简器级别上更新该值。