Javascript 反应添加购物车重构-未知添加状态

我正在尝试将项目添加到购物车中而不进行重复。我工作，但我不认为我做得很好，因为我得到了一个奇怪的量值

到目前为止它是如何工作的。 单击一个项目按钮，它将道具传递给HandLeadCarItem（）。道具为addedItem，即物品名称和addedItemPrice

默认状态

  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)
  }));
} };

奇怪的额外数量状态屏幕截图。

我是新手，所以代码可能是非常抱歉的

我在处理程序中的逻辑 -签入项目名称已在购物车数组中

-若它是新添加的项，那个么新对象将添加到数组中

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

我不明白为什么我添加了额外的数量状态=/

---

感谢您的任何建议。

我相信代码本身就说明了问题，但如果您对某些事情感到困惑，请询问我

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}; 
    });
  }
}

---

我相信代码本身就说明了问题，但如果您对某些事情感到困惑，请询问我

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}; 
    });
  }
}

---

必需项对象中的数量需要增加。但是，在根目录中创建了另一个变量

quantity

。尝试将else块更新为以下内容：

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

---

必需项对象中的数量需要增加。但是，在根目录中创建了另一个变量

quantity

。尝试将else块更新为以下内容：

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

---

这很有道理。谢谢你，我花了这么长时间在这件事上，今天真是心碎。谢谢编辑：不确定如何根据回答进行更新。希望是这样。谢谢，如果有意义的话，您总是必须在

setState

中返回“root”项。谢谢你，我花了这么长时间在这件事上，今天真是心碎。谢谢编辑：不确定如何根据回答进行更新。希望是这样。谢谢，如果有意义的话，您总是必须在

setState

中返回“root”项。