Redux检查数组,如果对象匹配更新对象

时间:2019-02-26 14:51:35

标签: javascript reactjs redux

@Transactional(readOnly = true)

这是我添加/删除数组函数

这是数组中的对象。

id(pin): "001"
Name(pin): "Dab on them"
price(pin): 100
img(pin): "/static/media/001.ac043cfc.png"
rarity(pin): "rare"
size(pin): "S"
quantity(pin): 1

如何检查在对象匹配时是否向数组添加新项目,以及是否更新数量+ 1。

如果数量> 1然后数量-1,则从数组中删除项目的操作相同

1 个答案:

答案 0 :(得分:0)

您可以检查数组中是否已经存在具有相同ID和数量的对象。在这种情况下,请更新数量,否则将对象添加到数组中。

我会写一些辅助方法来使所有内容清晰明了。

您可以使用以下内容按数量检查是否存在:

const quantityForItem = (list, newItem) => {
  const item = list.find(item => item.id === newItem.id)
  return item && item.quantity || 0
}

您可以增加或减少重新映射列表并更改感兴趣的项目的数量:

const updateQuantity = (list, newItem, variation) =>
  list.map(item => {
    if ( item.id !== newItem.id ) return item
    return { ...item, quantity: item.quantity + variation }
  })

您可以添加一个新项目,只需将其限制在上一个列表中即可。请注意:concat,而不是push,因为我们需要使其保持不变。

const add = (list, newItem) =>
  list.concat(newItem)

删除一项可能就像您已经拥有的一项:

const remove = (list, itemToRemove) =>
  list.filter(item => item.id !== itemToRemove.id)

将所有内容放在一起:

case 'CART_ADDITEM': {
  const { cart } = state
  const newItem = action.payload
  if ( quantityForItem(cart, newItem) !== 0 ) {
    return { cart: updateQuantity(cart, newItem, +1) }
  }
  return { cart: add(cart, newItem) }
}

case 'CART_REMOVEITEM': {
  const { cart } = state
  const itemToRemove = action.payload
  if ( quantityForItem(cart, itemToRemove) > 1 ) {
    return { cart: updateQuantity(cart, itemToRemove, -1) }
  }
  return { cart: remove(cart, itemToRemove) }
}