如何使用扩展运算符替换数组中的值

Question

我有以下对象：

const initialState = {
cart: {
    products: []
},
numberOfItems: 0

}

在下面的函数中，我想替换产品数组中的一种产品的数量。

“newItems”是包含更改数量的对象。

on(increaseItemQuantity, (state, action) => {
    const newItems = increaseQuantity(state, action.itemId, action.size);

    const newState  = {
        ...state,
        ...state.cart,
        products: [...newItems]
    }

    return newState;
}),

我希望购物车中的产品数组包含一个具有新数量的对象，而不是在状态中创建一个新的产品数组。

起始购物车如下所示：

{
    cart:
        products: [
            {quantity: 9, size: 'XX-Large', _id: '61814f61efae17ff8c7d7a2c'},
            {quantity: 1, size: 'Medium', _id: '618152d8fe84f566364585f0'}
        ]
}

我希望将数量为 9 的商品替换为下面数量为 10 的商品：

{
cart:
    products: [
        {quantity: 10, size: 'XX-Large', _id: '61814f61efae17ff8c7d7a2c'},
        {quantity: 1, size: 'Medium', _id: '618152d8fe84f566364585f0'}
    ]
}

而是将一个额外的产品数组添加到 newState 中，如下所示，购物车中的原始产品永远不会被替换：

newState 
  cart:
      products: (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
     _id: "617046de3eaaaa7221c1924e"
  products: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, Array(7)]




const increaseQuantity = (state, itemId, size) => {
    console.log('state.cart.products', state.cart.products)
    const item = state.cart.products.find(item => item._id === itemId && 
        item.size === size);

    const newItem = {...item};

    ++newItem.quantity;

    let  newItems = state.cart.products.filter(item => item._id !== 
          itemId   && item.size !== size);

    newItems.push(newItem);

    return newItems;
}

Answer 1

相比查找和过滤，仅 map 遍历数组可能更容易，如果产品 ID 与搜索 ID 匹配，则更新该产品对象的数量值，并且 return 它，否则只是 return 一个未更改的对象。

然后您可以更新您的状态。这将创建一个新的状态对象，保留旧状态，为购物车添加一个新的属性，保留现有购物车的属性，然后将新的 updatedArray 添加到 products。

return {
  ...state,
  cart: {
    ...state.cart,
    products: updated
  }
};

const state={cart:{products:[{quantity:9,size:"XX-Large",_id:"61814f61efae17ff8c7d7a2c"},{quantity:1,size:"Medium",_id:"618152d8fe84f566364585f0"}],anotherProp1:1,anotherProp2:2}};

function updateItem(state, id) {

  const { products } = state.cart;

  const updated = products.map(product => {
    if (product._id === id) {
      return { ...product, quantity: product.quantity + 1 };
    }
    return product;
  });

  return {
    ...state,
    cart: {
      ...state.cart,
      products: updated
    }
  };

}

const id = '61814f61efae17ff8c7d7a2c';

const updatedState = updateItem(state, id);

console.log(updatedState);

如何使用扩展运算符替换数组中的值

How do I use the spread operator to replace a value in an array

javascript

ngrx-store