Javascript Reducer不知从哪里开始在商店中添加商品

所以我试图在我的React redux站点上添加一个购物车功能，我被一个非常奇怪的事件卡住了。这是我从动作的有效载荷中得到的，例如：

{
    info: 'Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops',
    id: 1,
    price: 109.95,
    image: 'https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg',
    count: 5,
    totalPrice: 549.75
 }

因此，我试图做的是，当一个与此id相同的项目试图添加时，不要添加它，而是增加购物车中已经存在的具有相同id的项目的数量：

const index = state.currentCart.findIndex((x) => x.id === id);
return {
          ...state,
          currentCart: [
            ...state.currentCart,
            state.currentCart[index].count += 1,
             (state.currentCart[index].totalPrice =
              state.currentCart[index].price * state.currentCart[index].count), 
          ],
        };

计数本身增加了，但同时发生了一些非常奇怪的事情。 产品的总价格及其计数也作为currentCart数组的元素添加，此时唯一应该发生的事情是使用有效负载的id更新购物车项目的计数， 这是触发此操作时currentCart数组发生的情况：

currentCart: [
    {
      info: 'Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops',
      id: 1,
      price: 109.95,
      image: 'https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg',
      count: 6,
      totalPrice: 659.7
    },
    2,
    219.9,
    3,
    329.85,
    4,
    439.8,
    5,
    549.75,
    6,
    659.7
  ]
}

---

我相信我没有改变国家的权利，提前谢谢你

我不确定，但这种情况正在发生
totalPrice=项目的价格*添加项目的次数

其他项目的价格不包括在内。试试这个-

state.currentCart[index].totalPrice += state.currentCart[index].price * state.currentCart[index].count

---

（只是“+=”而不是“=”）

不，它们不是凭空而来的，您正在积极地将值添加到数组中。 对于如何正确处理状态，您似乎有点困惑。您要么选择一种不可变的方法（如果您使用react，我真的建议您这样做），要么选择对引用进行变异

在javascript中，当您执行赋值时，该赋值还返回正在赋值的值，例如：

设x=1
设b=x+=1
//b现在是2，x是2
设c=b+=2
//b现在是4，c也是4

这正是阵列分配中发生的情况。首先将数组的旧版本分散到新版本上（制作副本），然后在将这些赋值的返回值保存到数组本身的同时（这是关键部分），对当前汽车的引用进行变异。 看看数组上的值，它们是您操作的结果：

count (1) += 1 // 2
price (109.95) * count (2) = 219.9,
count (2) += 1 // 3
price (109.95) * count (3) = 329.85
... etc

所以，您在阵列上拥有的是计数和总价的历史记录

这是代码中发生的情况的分解：

// Will allways be at index 0, because you add it as first element 
// and then you keep copying the array below
const index = state.currentCart.findIndex((x) => x.id === id); 
return {
          ...state,
          currentCart: [
            // Here you are copying the old array into the new one,
            // keeping the current car at the first position 
            ...state.currentCart,
            // Here you are updating the values of the object at index 0
            // and at the same time you are adding those values at 
            // the end of the array
            state.currentCart[index].count += 1,
             (state.currentCart[index].totalPrice =
              state.currentCart[index].price * state.currentCart[index].count), 
          ],
        };

您要做的是每次构建一个新的currentCart。此外，您希望对currentCart使用对象，而不是数组。如果您想在购物车中保留项目列表，我建议您在购物车上创建一个名为items的嵌套属性，并将其设置为数组。 您的代码示例没有向我们展示您从何处获得操作，但我将为您提供一个示例，假设您刚刚拥有该操作，并且要添加到购物车的新项目位于有效负载中

  const currentCart = state.currentCart;
  const newItem = action.payload
  return {
      ...state,
      currentCart: {
        ...currentCart,
        count: currentCart.count + 1
        totalPrice: (newItem.price * newItem.count) + currentCart.totalPrice,
        items: [...currentCart.items, newItem] 
      },
    };

---

您正在谈论

currentCart

数组中的奇怪值？就像

2219.9，

是的，确切地说，它只是突然出现，或者我做错了什么。请尝试删除您的

return

语句中的这一行，然后重试

（state.currentCart[index].totalPrice=state.currentCart[index].pricestate.currentCart[index].count），

嘿，很抱歉我的返回被错误地复制了，我修好了，你能再看看吗嗯。。。尝试将您的设置包装在

{}

中调用

currentCart:[…state.currentCart，{state.currentCart[index].count+=1，剩余的setter}]

。最初是这样的，然后我将其更改为“=”，它们都给出相同的结果…currentCart最初在初始状态下是一个空数组，但您在操作中将其作为currentCart:{}返回，这是我在你的例子中不理解的事情，请你解释一下。你应该在初始状态下将currentCar更改为空数组。如果它是一个数组，那么使用它的方式就没有意义。数组应该有一个项目列表，但currentCar看起来像是一个单独的实体，因此不需要数组。我将修复代码以删除所有数组引用。这是一个数组，因为我随后在组件中使用它与.map一起加载购物车项目。您必须共享有关代码的更多详细信息，但如果您希望它是当前汽车的列表（您从未解释过），最好以复数形式命名。此外，您向我们展示的代码并没有向阵列中添加新车，它只是更新了第一辆车。我最终以另一种方式完成了更新，但我仍会将其标记为解决方案，因为我感谢您花时间解释并向我展示我做错了什么：）