javascript - React 添加购物车重构 - 未知添加状态

Question

我正在尝试在没有 redux 的情况下将商品添加到购物车。我工作，但我认为我做得不对，因为我得到了一个奇怪的数量值。

到目前为止它是如何工作的。您单击一个项目按钮，它将道具传递给 handleAddCartItem()。道具是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)
  }));
} };

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

我是新手，所以代码可能很抱歉。

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

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

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

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

感谢您的任何建议。

标签： javascriptreactjs

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