I created a cart component for my shopping app but I'm facing a problem that when I update the quantity of product it's updating total price but not item price(image in the end), my code is below
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,
};
}
that's my reducer where I added function to update quantity,
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)),
};
};
It's my cart code, here I'm facing another problem that my footer function is displaying and flat List not working properly if I add more products Flat list will only show 3 products and other products will we added above them.
will someone please help me and tell me what's going on?
You are not updating the price anywhere
you can do like below
<Text style={styles.price}>Rs {item.price*item.quantity}</Text>
Or if you want the values to be in the redux state consider updating the value in the reducer level.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.