Состояние установки возвращает undefined, невозможно деструктурировать свойство 'title' из 'undefined', поскольку оно не определено

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

Вот мой полный код на codeandbox: 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 })