Setting state返回undefined，无法销毁"undefine"的属性"ti

Question

我正在尝试创建一个添加到购物车的函数，该函数从页面中获取产品并将属性添加到数组中。我的功能看起来像这个

addToCart({ title, desc, price, image }) {
// This is what is returning undefined 
this.setState((state) => ({
cart: [
...this.state.cart,

{
title,
desc,
price,
image,
},

],

}));
}

我的物品看起来像：

<Card key={title}  style={{ width: '18rem'}}>
<Card.Img variant="top" src={imageUrl}width='10rem' height='180rem' />
<Card.Body>
<Card.Title>{title}</Card.Title>
<Card.Text>
{desc} <br />
{price}
</Card.Text>
<Button variant="primary" onClick={e => this.handleAddToCart(e, this.state.items)} >Add to cart</Button>
</Card.Body>
</Card>

我很困惑为什么它要放置一个看起来像的阵列

0:
desc: undefined
image: undefined
price: undefined
title: undefined

以下是我在codesandbox上的完整代码：https://codesandbox.io/s/unruffled-water-2rvjk?file=/src/App.js

我提前感谢你花时间帮助我。

Answer 1

我认为，在单击Add to cart时，您正在传递items

e => this.handleAddToCart(e, this.state.items)
// this.props.addToCart(items);

和addToCart中一样，您只需要一个项目用于解决您的问题代码如下：

e => this.handleAddToCart(e, { title, image : imageUrl, desc, price })