React reducer 错误的增量数

Question

我在调度触发我的 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: [],
};

Answer 1

我怀疑这是因为您将 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 可以简化流程的可用信息。

React reducer 错误的增量数

React reducer wrong increment number

javascript

reactjs

state

reducers