Question

我正在尝试将商品添加到购物车中，而无需进行还原。我工作了，但我认为我做得不好，因为我得到了一个奇怪的数量值。

到目前为止如何运作。您单击一个项目按钮，它将道具传递给handleAddCartItem（）。道具是addItem，它是商品的名称，而且是addItemPrice。

默认状态

  state = {
term: "",
cart: [
  {
    item: "",
    price: 0,
    quantity: 0
  }
]};

处理程序的工作方式。

  handleAddCartItem = (addedItem, addedItemPrice) => {
// check if already in cart
let index = this.state.cart.findIndex(el => el.item === addedItem);

if (index == -1) {
  console.log("item new to cart");
  this.setState(prevState => ({
    cart: [
      ...prevState.cart,
      {
        item: addedItem,
        price: addedItemPrice,
        quantity: 1
      }
    ]
  }));
} else {
    this.setState(prevState => ({
    quantity: (prevState.cart[index].quantity += 1)
  }));
} };

怪异的数量状态屏幕截图。

我是新来的反应者，因此代码可能非常抱歉。

我在处理程序中的逻辑 -检查商品名称已经在购物车数组中。

-如果它是新添加的项目，则新对象将添加到数组。

-如果项目已经在数组中，那么我使用数组中当前项目的索引，并且仅更新其数量。

我不明白为什么我要增加数量状态= /

任何建议，谢谢您。

Answer 1

我相信代码可以说明一切，但是如果您对某些事情感到困惑，请问我。

handleAddCartItem = (addedItem, addedItemPrice) => {
  // check if already in cart
  let index = this.state.cart.findIndex(el => el.item === addedItem);

  if (index == -1) {
    console.log("item new to cart");
    this.setState(prevState => ({
      cart: [
        ...prevState.cart,
        {
          item: addedItem,
          price: addedItemPrice,
          quantity: 1
        }
      ]
    }));
  } else {
    // THIS IS THE PROBLEM
    this.setState(prevState => ({
      quantity: (prevState.cart[index].quantity += 1)
    }));

    // HOW IT SHOULD BE
    this.setState(prevState => {
      let newCart = [...prevState.cart];
      newCart[index].quantity += 1;
      return {cart: newCart}; 
    });
  }
}

Answer 2

必需项目对象中的

数量需要增加。但是在根目录创建了另一个变量quantity。尝试将else块更新为：

else {
  this.setState(prevState => ({
    cart: prevState.cart.map((item, itemIndex) => {
      if(itemIndex === index) {
        return {
          ...item,
          quantity: item.quantity + 1
        }
      }
      return item
    })
  }));
}

React Add Cart重构-添加状态未知

2 个答案: