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

【问题标题】：React add cart refactoring - unknown added stateReact 添加购物车重构 - 未知添加状态
【发布时间】：2019-05-01 11:43:38
【问题描述】：

我正在尝试在没有 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)
  }));
} };

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

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

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

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

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

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

感谢您的任何建议。

【问题讨论】：

标签： javascript reactjs

【解决方案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}; 
    });
  }
}

【讨论】：

OOOOOOOOOO 有道理。谢谢你我花了这么长时间今天被灵魂粉碎了。谢谢。编辑：不知道如何更新回答。希望mod打勾。谢谢
是的，如果有意义的话，您总是必须在setState 中返回“根”项。

【解决方案2】：

需要增加必要项目对象中的数量。但是在根目录下创建了另一个变量quantity。尝试将 else 块更新为此：

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

【讨论】：