Question

我的状态如下：

items: [
  { id: 1, name: 'banana', price: 100, quantity: 1 },
  { id: 2, name: 'apple', price: 200, quantity: 1 },
  { id: 3, name: 'blueberry', price: 300, quantity: 1 }
]

cart: []

我具有将商品推入购物车的功能：

addItem = item => {
  const { cart, total, itemQuantity } = this.state
  const { price, id } = item
  const i = cart.indexOf(item)

  if (!cart.some(x => x.id === id)) {
    this.setState({
      cart: [...cart, { ...item, quantity: itemQuantity }],
      total: total + (price * itemQuantity)
    })
  }
}

我正在检查该项目是否存在，然后再添加它以避免重复。我想发生的是，如果该项目已经添加到cart，我想找到该对象并更改其数量值。

这可能吗？

Answer 1

我认为以下解决方案将为您工作，而无需太多更新您的设计。您实际上只需要对要添加到购物车中的一系列商品调用2017/08/01方法Array.prototype。确保将reduce的当前状态作为初始值传递给cart（将其作为第二个参数传递）。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

通过一些简单的逻辑，您可以检查购物车中是否已存在商品ID（这只是一个以商品ID为键的对象文字）。如果不是，则添加对象并将数量属性设置为1-如果存在，则将数量属性增加1。

希望下面的例子很清楚，可以为您提供帮助：

reduce

Answer 2

您可以执行以下操作：

addItem = item => {
  const { cart, total, itemQuantity } = this.state
  const { price, id } = item
  const index = cart.findIndex(x => x.id === id);
  let quantity = itemQuantity;

  const newCart = index === -1 
     ? [...cart, {...item, quantity }] 
     : cart.map((it, i) => {
           if (i === index) {
             quantity = it.quantity + quantity;
             return { ...it, quantity }
           } else return it
       });

  this.setState({
    cart: newCart,
    total: total + (price * quantity)
  });

}

Answer 3

是的，只需利用您已经定义的i常量即可！

addItem = item => {
  const { cart, total, itemQuantity } = this.state
  const { price, id } = item
  const i = cart.indexOf(item)
  const newCart = [...cart]
  const newTotal = total + (price * itemQuantity)

  if (i !== -1) {
    const newItem =  { ...item, quantity: itemQuantity + 1 }

    newCart[i] = newItem

    this.setState({
      cart: newCart,
      total: newTotal,
    })

    return
  }

  newCart.push({ ...item, quantity: itemQuantity })

  this.setState({
    cart: newCart,
    total: newTotal,
  })
}

请注意，尚不清楚您希望total功能如何工作，因此我将其保留不变。但是，这会更新您要查找的商品。

Answer 4

我必须检查该物品是否已添加到购物车，然后再用该物品推入新对象。

然后我必须在购物车中找到该物品的索引并更新其数量。

addItem = item => {
  const { cart, total, itemQuantity } = this.state
  const { price, id } = item
  const i = cart.findIndex(x => x.id === id)

  if (!cart.some(x => x.id === id)) {
    this.setState({
      cart: [
        ...cart,
        { ...item, quantity: itemQuantity }
      ]
    })
  } else {
    this.setState({
      cart: [
        ...cart.slice(0, i),
        { ...cart[i], quantity: cart[i].quantity + itemQuantity },
        ...cart.slice(i + 1)
      ]
    })
  }

  this.setState({
    total: total + (price * itemQuantity)
  })
}

一旦添加到数组，更改对象的值

4 个答案: