如何解决即使状态已更新,组件也不会重新呈现
我正在尝试构建一个简单的购物车应用程序。
- 当该商品不在购物车中时,我会显示“添加”按钮->单击添加一个商品将被添加到购物车,-1 +将显示在用户界面中。
- 现在,当我单击加号(+)按钮时,商店正在更新,但是更改未在UI中反映出来,它仍显示-1 +当我转到其他选项卡并返回时,它将重新显示-渲染,以便可以看到新状态。
- 现在说我有-10 +,当我单击-5次时,由于那里有0件物品,它会被从购物车中删除,此状态可见,但是当唯一物品的数量在变化时会发生中间变化没有呈现用户界面。
我的选择器代码。
const cartItem: CartItem = useSelector((state) => {
if (
!state ||
!state.cart ||
!state.cart.items ||
state.cart.items.length === 0
) {
return {quantity: 0};
}
const result = state.cart.items.find(
(item: CartItem) => item.itemId === inventory.id,);
console.log('result = ' + JSON.stringify(result));
return result;
});
完整的组件代码。
function InventoryView({inventory,navigation}: IProps) {
const cartItem: CartItem = useSelector((state) => {
if (
!state ||
!state.cart ||
!state.cart.items ||
state.cart.items.length === 0
) {
return {quantity: 0};
}
const result = state.cart.items.find(
(item: CartItem) => item.itemId === inventory.id,);
console.log(JSON.stringify('result = ' + JSON.stringify(result)));
return result;
});
console.log('cart item =' + JSON.stringify(cartItem));
const shouldShowAddButton = !cartItem || !cartItem.quantity;
console.log('shouldShowAddButton' + shouldShowAddButton);
const dispatch = useDispatch();
return (
<View style={[styles.cardView]}>
<View>
<Text style={styles.textMain}>{inventory.name}</Text>
<View style={styles.costRow}>
<Text style={styles.costText}>₹ {inventory.price}</Text>
<Text style={styles.costUnitText}> {inventory.unit}</Text>
</View>
</View>
{shouldShowAddButton && (
<TouchableOpacity
style={styles.addButton}
onPress={() =>
dispatch(
addToCart({
itemId: inventory.id,quantity: 1,price: inventory.price,name: inventory.name,}),)
}>
<Text style={styles.addText}>Add</Text>
</TouchableOpacity>
)}
{!shouldShowAddButton && (
<View style={{alignItems: 'flex-end'}}>
<View style={{flexDirection: 'row',alignItems: 'center'}}>
<TouchableOpacity
style={styles.buttonMinus}
onPress={() => dispatch(decreaseQuantity(inventory.id))}>
<Text>-</Text>
</TouchableOpacity>
<Text style={styles.addText}>{cartItem.quantity}</Text>
<TouchableOpacity
style={[styles.buttonMinus,styles.buttonPlus]}
onPress={() => dispatch(increaseQuantity(inventory.id))}>
<Text>+</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
style={[styles.deleteButton]}
onPress={() => dispatch(removeFromCart(inventory.id))}>
<Text style={styles.deleteButtonTextStyle}>Remove</Text>
{/* <Image source={require('../assets/pngs/delete.png')} /> */}
</TouchableOpacity>
</View>
)}
</View>
);
}
我的减速器代码
import {CartItem} from '../models/CartItem';
export const ADD_TO_CART = 'ADD_TO_CART';
export const REMOVE_FROM_CART = 'REMOVE_FROM_CART';
export const INCREASE_QUANTITY = 'INCREASE_QUANTITY';
export const DECREASE_QUANTITY = 'DECREASE_QUANTITY';
export interface CartReducerState {
items: CartItem[];
}
export const cartInitialSate: CartReducerState = {
items: [],};
const cartReducer = (state = cartInitialSate,action: any) => {
switch (action.type) {
case ADD_TO_CART:
console.log(JSON.stringify(action.data));
const updatedState = {
...state,items: [...state.items,action.data],};
console.log(JSON.stringify(updatedState));
return updatedState;
case REMOVE_FROM_CART:
return {
...state,items: state.items.filter((item) => item.itemId !== action.data.id),};
case INCREASE_QUANTITY:
return {
...state,items: state.items.map((item) => {
if (item.itemId === action.data.id) {
item.quantity++;
}
return item;
}),};
case DECREASE_QUANTITY:
return {
...state,items: state.items
.map((item) => {
if (item.itemId === action.data.id) {
item.quantity--;
}
return item;
})
.filter((item) => item.quantity && item.quantity > 0),};
default:
return state;
}
};
export {cartReducer};
解决方法
在小车减速器的INCREASE_QUANTITY中。与其返回同一个对象,不如尝试返回一个新对象。
case INCREASE_QUANTITY:
return {
...state,items: state.items.map((item) => {
if (item.itemId === action.data.id) {
item.quantity++;
return {...item};
}
return item;
}),};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。