javascript - Redux Spread 运算符与 Map

Question

我有一个数组中的对象状态(在我的 ReduxReducer 中)。

const initialState = {
      items: [
        { id: 1, dish: "General Chicken", price: 12.1, quantity: 0 },
       { id: 2, dish: "Chicken & Broccoli", price: 10.76, quantity: 0 },
        { id: 3, dish: "Mandaran Combination", price: 15.25, quantity: 0 },
        { id: 4, dish: "Szechuan Chicken", price: 9.5, quantity: 0 }
      ],
      addedItems: [],
     total: 0
    };

我有一个将对象的数量加 1 的操作，例如 {id:1，菜品:将军鸡，价格:10.76，数量:0}当在 Cart.jsx 中单击按钮时。这是我尝试使用展开运算符的第一个Reducer:

case "ADD_QUANTITY":
  let existing_item = state.addedItems.find(
    item => action.payload === item.id
  );

  return {
    ...state,
    addedItems: [
      ...state.addedItems,
      { ...existing_item, quantity: existing_item.quantity + 1 }
    ]
  };

这不起作用，它没有将数量加 1，而是添加了另一个对象，并将数量设置为 2。 . .所以，我尝试像这样使用Map

case "ADD_QUANTITY":
  return {
    ...state,
    addedItems: state.addedItems.map(item =>
      item.id === action.payload
        ? { ...item, quantity: item.quantity + 1 }
        : item
    )
  };

这工作正常。我的问题是，为什么展开运算符不起作用？据我所知，它应该做与 map 相同的事情？

Answer 1

这两段代码有很大不同。

第一个从 state.addedItems 和新对象 { ...existing_item,Quantity:existing_item.quantity + 1 } 创建一个新数组，然后将该数组分配给状态的 addedItems 属性。

第二段代码迭代addedItems，如果找到与有效负载具有相同ID的元素，则会创建一个新对象{ ...item, amount: item.quantity + 1 } 并返回该项，而不是数组中的原始项。

因此，尽管两种方法都创建了一个新数组，但第一种方法与原始数组相比有一个额外的对象，而第二种方法则有一个具有修改属性的对象。