使用用户导入器增加购物车中产品数量的问题(反应)

Question

我有一个问题，增加和减少在购物车中的产品数量，只有目标产品使用的使用-减速剂在反应。当我单击“增加”或“减少”按钮时，我会收到错误，整个显示将消失。

这是我的还原机功能：

 if (action.type === "INCREASE_QUANTITY") {
    return {
      ...state,
      cart: state.cart.map((x) =>
        x.id === action.payload ? x.quantity + 1 : x.quantity
      ),
    };
  }

  if (action.type === "DECREASE_QUANTITY") {
    {
      return {
        ...state,
        cart: state.cart.map((x) =>
          x.id === action.payload ? x.quantity - 1 : x.quantity
        ),
      };
    }
  }

这是我的调度职能：

  const increaseQuanity = (id) => {
    dispatch({ type: "INCREASE_QUANTITY", payload: id });
  };
  const decreaseQuanity = (id) => {
    dispatch({ type: "DECREASE_QUANTITY", payload: id });
  };

最后，这是一个按钮，它调用函数：

<div className="flex space-x-2 md:space-x-3 items-end mt-4 md:mt-9 md:text-xl">
                    <button
                      onClick={() => decreaseQuanity(item)}
                      className=" font-bold text-yellow-700 shadow p-2 border-1 rounded-md  ">
                      <FaMinus />
                    </button>
                    <h3 className="text-2xl ">{item.quantity}</h3>

                    <button
                      onClick={() => increaseQuanity(item)}
                      className=" font-bold text-yellow-700 shadow p-2 border-1 rounded-md  ">
                      <FaPlus />
                    </button>
                  </div>

拜托，我真的需要帮助。谢谢!

Answer 1

您的increaseQuantity和decreaseQuantity函数期望接收一个id，我认为它应该是一个字符串。

const increaseQuanity = (id) => {
    dispatch({ type: "INCREASE_QUANTITY", payload: id });
  };
  const decreaseQuanity = (id) => {
    dispatch({ type: "DECREASE_QUANTITY", payload: id });
  };

但是，当您执行时，您将传递一个item对象。

固定到减速器

if (action.type === "INCREASE_QUANTITY") {
    return {
      ...state,
      cart: state.cart.map((x) =>
        x.id === action.payload 
          ? ({...x, quantity: x.quantity + 1 })
          : x
      ),
    };
  }