我已经使用 React 构建了一个购物车。为什么我的购物车不工作？通过工作，我的意思是为什么购物车中的数量没有增加？

Question

我使用 React 构建了一个购物车。购物车在 1 之后不显示购物车中的商品总数。即 1 是它可以计算的最大数量。我希望它计数超过 1 个项目。这是Cart 组件：

Cart.js

    import React, { Component } from 'react'
    import formatCurrency from '../util';


    export default class Cart extends Component {
    render() {
        const { cartItems } = this.props;
        //this part is not displaying the number of items in the cart
        return (
            <div>
                {cartItems.length === 0 ? (
          <div className="cart cart-header">Cart is empty</div>
        ) : (
          <div className="cart cart-header">
            You have {cartItems.length} in the cart{" "}
          </div>
        )}

                <div>
                <div className="cart">
                    <ul className="cart-items">
                        {cartItems.map(item => (
                            <li key={item._id}>
                                <div>
                                     <img src={item.image} alt={cartItems.title}></img>
                                </div>
                                <div>
                                    <div>{item.title}</div>
                                    <div className="right">
                                    {formatCurrency(item.price)} * {item.count}
                                        <button onClick={ () => this.props.removeFromCart(item)}>         Remove</button>
                                    </div>
                                    
                                </div>
                            </li>
                        ) )}
                    </ul>

                </div>
            </div>

            </div>
            
           
        );
    }
} 

App.js

我也加入了状态

    class App extends React.Component {
    constructor(){
    super();
    this.state = {
      products: data.products,
      cartItems: [],
      size:"",
      sort:"",
    };
  }

    //this part is not working

    addToCart = (product) => {
    const cartItems = this.state.cartItems.slice();
    let alreadyInCart = false;
    cartItems.forEach((item) => {
      if (item._id === product._id) {
        item.count++;
        alreadyInCart = true;
      }
    });
    if (!alreadyInCart) {
      cartItems.push({...product, count: 1 });
    }
    this.setState({cartItems});
    };

这里是 Github 上的代码链接：Link To Github

Answer 1

addToCart = (product) => {
  const { cartItems } = this.state;
  // find whether the product is there in the cartItems
  const isProductPresent = cartItems.some(item => item.id === product.id);
  if(isProductPresent){
    const updatedCartItems = cartItems.map(item => {
      if(item.id === product.id){
        return { ...item, count: ++item.count}
      }
      return item;
    })
    this.setState({cartItems: updatedCartItems});
  }
  else {
    this.setState({cartItems: [...cartItems, {...product, count: 1}] });
  }
  };