Question

我正在尝试构建一个简单的购物车应用程序。

当该商品不在购物车中时，我会显示“添加”按钮->单击添加一个商品将被添加到购物车，-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};

UI看起来像这样

Answer 1

在小车减速器的INCREASE_QUANTITY中。与其返回同一个对象，不如尝试返回一个新对象。

case INCREASE_QUANTITY:
  return {
    ...state,
    items: state.items.map((item) => {
      if (item.itemId === action.data.id) {
        item.quantity++;
        return {...item};
      }
      return item;
    }),
  };

即使状态已更新，组件也不会重新呈现

1 个答案: