反应购物车突变问题

编程问答 2022-05-31

问题描述

我正在练习 React，开发商店，以添加我使用 this 示例的购物车的功能。

但在我的实现中，即使我的版本几乎相同，“add to cart”按钮并没有区分每个产品，意思是：

  • 第一次点击不仅会影响所有按钮，而且其他按钮会更改为“添加更多”图例
  • 每次后面的点击只会添加更多用户第一次点击的同类产品，忽略是否点击了另一个。

似乎是由 Reducer 函数中的突变引起的错误：

export const CartReducer = (state,action) => {
switch (action.type) {
    case 'ADD_ITEM':
      if (!state.cartItems.find((item) => item.id === action.payload.id)) {
        //-------HERE
        state.cartItems.push({
          //mutation here?
          ...action.payload,quantity: 1,});
        //-------
  }

  return {
    ...state,...sumItems(state.cartItems),cartItems: [...state.cartItems],};

有什么替代方法呢？ 如何在没有突变的情况下推送状态中的项目？

完整的 te 文件其 here

Here 您可以检查部署并复制错误，here 其正确的功能演示

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptreactjsreactjsreduxreduxreduxredux-reducers