將多個相同商品添加到非常簡單的購物車元素時，增加商品數量時遇到麻煩

Question

好的，你好，所以我想增加已添加到購物車中的每個項目的數量。 這也是我的第一篇文章，因此，如果您有如何更好地提出更多問題的技巧，將不勝感激。 （我確實在尋找相關的問題，並搜索了各種資源，但無法確切找到特定問題所需的內容）

我做了一個條件來檢查數量是否少於10，以便希望它增加到10只是看是否可行。 但是，它僅增加到2。它將數組記錄到控制台，並顯示該項目具有數量：單擊一次，並增加到數量：第二次單擊，增加到2。 它沒有超出范圍，我可以單擊4、5次，它始終是數量：2.不知道如何解決此問題？

handleClick = (product) => {
    product['quantity'] = 1;
    let sameItem = this.state.cartItems.findIndex(item => item.id == product.id);
    console.log(sameItem);
    if(sameItem != -1){
      if(this.state.cartItems[sameItem].quantity < 10){
        this.state.cartItems[sameItem].quantity += 1;
      }
    } else {
      let cartItems = [...this.state.cartItems, product];
      this.setState({ cartItems }, () => console.log(this.state.cartItems));
    }
    console.log(this.state.cartItems);


  }

 {/* This is all im trying to display with the cart for now, but it does not increment, but even in the console it does not increment */}
        <div>
          {cartItems.map(item => (
            <p key={item.id} >{item.quantity}</p>
          ))}
        </div>

我希望this.state.cartItems的console.log每次單擊該項目時都會增加數量字段，以及react組件的return（）中cart元素中顯示的數量。

Answer 1

您忘記了ifState中的setState

if(this.state.cartItems[sameItem].quantity < 10){
    this.state.cartItems[sameItem].quantity += 1;
    this.setState({cartItems});
 }

Answer 2

您必須先收集更新后的cartItems，然后再收集更新后的setState：

 if(this.state.cartItems[sameItem].quantity < 10){ let newCartItems = this.state.cartItems.map( (item,index)=>{ if (index == sameItem) { item.quntity +=1; return item } else { return item; } }); this.setState({cartItems:newCartItems}); }