设置状态返回返回未定义，无法解构“未定义”的属性“标题”，因为它未定义答案

【问题标题】：Setting state returns returns undefined, Cannot destructure property ‘title’ of ‘undefined’ as it is undefined设置状态返回返回未定义，无法解构“未定义”的属性“标题”，因为它未定义
【发布时间】：2020-07-13 04:12:25
【问题描述】：

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

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

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

提前感谢您抽出宝贵时间帮助我。

【问题讨论】：

函数的第一个参数是事件，要么从函数调用中删除事件，要么在定义中添加参数。

标签： javascript arrays reactjs state

【解决方案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 })

【讨论】：

看来handleaddtocart 是问题所在，谢谢！