当我增加计数器时,它会增加 2 而不是 1。我正在为此使用react上下文

IT技术 reactjs react-context
2021-04-24 18:48:51

在这里,我调用了一个函数 addItem,在其中我增加了购物车的value

 <CartItem
                key={`cartItem-${item.item_id}`}
                onIncrement={() => addItem(item)}
                onDecrement={() => removeItem(item)}
                onRemove={() => removeItemFromCart(item)}
                data={item}
              />

我的上下文是

const addItemHandler = (item, quantity = 1) => {
    dispatch({ type: 'ADD_ITEM', payload: { ...item, quantity } });
  };

和我的 reducer 用于在 reducer.js 中添加项目

export const addItemToCart = (state, action) => {
  const existingCartItemIndex = state.items.findIndex(
    (item) => item.item_id === action.payload.item_id
  );
  if (existingCartItemIndex > -1) {
    const newState = [...state.items];
    newState[existingCartItemIndex].quantity += action.payload.quantity;
    return newState;
  }
  return [...state.items, action.payload];
};
const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return { ...state, items: addItemToCart(state, action) };
    default:
      throw new Error(`Unknown action: ${action.type}`);
  }
};

此代码将计数器增加 2 而不是增加 1。

1个回答

您的数量增加两次的原因是因为您将使用React.StrictModewhich 两次调用您的减速器。

这是有意的行为,它有助于检测副作用。您必须注意,如果您的减速器是纯函数,则不会发生这种效果。

在您的情况下,您已经改变了 state 中的数量值,这就是您双倍递增的原因。即使您使用扩展语法来复制数组,它也只会执行浅复制,并且其中的内部对象仍然保持相同的引用。

要正确更新它,您必须以不可变的方式更新减速器。您可以Array.prototype.slice为此目的使用

export const addItemToCart = (state, action) => {
  const existingCartItemIndex = state.items.findIndex(
    (item) => item.item_id === action.payload.item_id
  );
  if (existingCartItemIndex > -1) {
        const newState = [
           ...state.items.slice(0, existingCartItemIndex),
           {...state.items[existingCartItemIndex], quantity: state.items[existingCartItemIndex].quantity + 1},
           ...state.items.slice(existingCartItemIndex + 1)
        ];
        return newState;
    }
  return [...state.items, action.payload];
};