每当我将商品添加到购物车时，我都想增加商品数量。我的代码不起作用，我在 Cart.js 中收到错误“无法读取未定义的属性（读取'长度'）”，我不知道为什么。谁能帮我？非常感谢！
代码沙盒链接：https://codesandbox.io/s/redux-shop-cart-forked-tlpek?file=/src/components/Cart.js
【问题讨论】：
您忘记从父 (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 属性，但您没有从父组件传递它。
【讨论】：
addToCart 方法，如果您需要任何信息，请告诉我。如果我已经回答了你的问题，请接受。谢谢！
这是因为在 APP.js 中，在第 75 行调用 <Cart /> 时，您没有传递道具，而是尝试从 card.js 中 4 const { cartItems } = props; 处的道具访问值，因此它将是未定义的和长度无法在 undefined 上读取。
我建议将 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 });
};
【讨论】：