React reducer 错误的增量数

React reducer wrong increment number

我在调度触发我的 ADD_TO_CART 类型的操作时遇到问题。我想在用户单击时增加购物车中添加的特定数量的数量。我得到的数量数字是:1、3、5、7、9..但是它们应该只增加 1,比如 1、2、3、4、5。为什么我在 if 语句中得到双倍增量当我想间接更新状态而不改变它时?非常感谢任何形式的帮助。

这是我的代码:

switch(action.type){
    case 'ADD_TO_CART':
        let tempCart = [...state.cart];
        let specificIndex = state.cart.findIndex((obj) => obj.id === action.item.id);
        if(specificIndex >= 0){
            tempCart[specificIndex].quantity +=1; // it should increment only by 1 and not by 2
            tempCart[specificIndex].price += action.item.price;
            return{
                ...state,
                cart : tempCart,
            }
        }

上面的例子是我的状态:

export const initialState = {
cart: [],
};

我怀疑这是因为您将 tempCart 视为 mutable(直接添加到其成员),而实际上它只是对 (不是 state 的一部分的副本,它应该始终被视为 不可变的 。相反,请尝试以下操作:

switch (action.type) {
  case "ADD_TO_CART":
    let specificIndex = state.cart.findIndex(
      (obj) => obj.id === action.item.id
    );
    if (specificIndex >= 0) {
      return {
        ...state,
        cart: state.cart.map((item, idx) =>
          idx == specificIndex
            ? {
                ...item,
                quantity: item.quantity + 1,
                price: item.price + action.item.price,
              }
            : item
        ),
      };
    }
}

如果您愿意,请参阅 Immutable Update Patterns for more. Note that, even in this small example, these sorts of updates can quickly become unwieldy. There are helper libraries 可以简化流程的可用信息。