Reducer 突然在商店中添加商品

Question

所以我想在我的 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
  ]
}

我确定我没有改变状态，提前谢谢你！

Answer 1

我不确定，但这正在发生
totalPrice = 商品价格 * 商品添加次数

其他商品的价格未包含在内。试试这个 -

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

（只是'+='而不是'='）

Answer 2

不，它们并非无中生有，您正在主动将值添加到数组中。您似乎对如何正确处理状态有点困惑。您要么选择一种不可变的方法（如果您使用的是 React，我强烈推荐这种方法），要么您选择改变您的引用。

在 javascript 中，当您进行赋值时，该赋值也会 return 赋值，例如此处：

let x = 1
let b = x+=1
// b is now 2 and x is 2
let c = b += 2
// b is now 4 and c is also 4

这正是您的数组赋值所发生的事情。您首先将旧版本的数组传播到新的数组（制作副本），然后在保存 [=27= 的同时（这是关键部分）改变对当前汽车的引用] 数组本身中那些赋值的值。查看数组上的值，它们是您操作的结果：

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] 
      },
    };

Reducer 突然在商店中添加商品

Reducer is adding items in the store out of nowhere

javascript

reducers

reactjs

redux

react-redux