无法增加购物车中的商品

Question

我想在每次将商品添加到购物车时增加商品数量。我的代码不起作用，我在 Cart.js 收到错误“无法读取未定义的属性（读取 'length'）”，我不知道为什么.谁能帮我？非常感谢！

Codesandbox link:https://codesandbox.io/s/redux-shop-cart-forked-tlpek?file=/src/components/Cart.js

Answer 1

您忘记从父 (app.js) 组件传递 cartItems 道具。

...
// in line no:75
 <Cart cartItems={this.state.cartItems} />
...

同时更改您的 addToCart 方法：

// in line no: 19
addToCart = (product) => {
    const isInCart = cartItems.some((item) => item.id === product.id);
    let newCart = [];
    if (isInCart) {
      newCart = this.state.cartItems.map((cart) => {
        return {
          ...cart,
          quantity: Number(cart.quantity) + 1
        };
      });
    } else {
      newCart = [...this.state.cartItems, { ...product, quantity: 1 }];
    }
    this.setState({
      cartItems: newCart
    });
  };

您期待 cart.js 文件中的 cartItems 道具，但您没有从父组件传递它。

Answer 2

这是因为在 APP.js 中，在第 75 行调用 <Cart /> 时，您没有传递道具，但您试图从 card.js 中的道具访问值 4 const { cartItems } = props; 所以它将是未定义的，长度无法在未定义的情况下读取。

我建议将 app.js 中的第 75 行更改为 <Cart cartItems={this.state.cartItems}/>

更正：

addToCart = (product) => {
let alreadyIncart = false;
let cartItems = this.state.cartItems.slice();
cartItems.length !== 0
  ? cartItems.forEach((item) => {
      if (item.id === product.id) {
        item++;
        alreadyIncart = true;
      }
      if (!alreadyIncart) {
        cartItems.push({ ...product, count: 1 });
      }
    })
  : cartItems.push({ ...product, count: 1 });
this.setState({ cartItems: cartItems });
};

无法增加购物车中的商品

cannot increment item in cart

reactjs

increment