React项目中handleAddProduct在onClick时报错：不是函数的问题求助

我正在开发带购物车功能的页面，handleAddProduct函数在页面其他区域能正常添加商品，但在首页点击时会报错：

handleAddProduct is not a function at onClick.

相关组件代码 #

App.js #

const [cartItems, setCartItems] = useState([]);

const handleAddProduct = (product) => {
  toast('✔️ Producto añadido')
  console.log('Producto seleccionado')
  const ProductExist = cartItems.find((item) => item.id === product.id);
  if(ProductExist){
    setCartItems(
      cartItems.map((item)=>
      item.id === product.id
      ? {...ProductExist, quantity: ProductExist.quantity + 1}
      : item
      )
    );
  } else {
    setCartItems([...cartItems, {...product, quantity: 1}]);
  }
  
};

...

// 将handleAddProduct作为props传给Inicio.jsx组件
<Route path='/' exact element={<Inicio handleAddProduct={handleAddProduct} />}/>

Inicio.jsx #

我把handleAddProduct作为props传入Inicio组件，再转传给Card组件：

const Inicio = ({ handleAddProduct }) => {
  return (
    <>
      <section className="new__product__section">
        <h2 className="title__section__card">Nuevos Productos</h2>
        <Card items={CardItemsHero} handleAddProduct={handleAddProduct} />
        <div className="btn__link__container">
          <Button color="primary" variant="contained" size="large">
            <Link to={'/catalogo'}>
              Ver Catálogo
            </Link>
          </Button>
        </div>
      </section>

    ...

Card.jsx #

问题出在这个组件：

const Card = (props, { handleAddProduct }) => {
  return (
    <>
      <div className='card__section'>
        {props.items.map(item => {
          return(
            <div className="product__card" key={item.id}>
              <div className="product__tumb">
                <img src={require('../../assets/' + item.image + '.png')} alt={item.title} />
              </div>
              <div className="product__details">
                <span className="product__category">{item.type}</span>
                <h3>{item.title}</h3>
                <div className="product__bottom__details">
                  <div className="product__price">{'$ ' + item.price + '.00'}</div>
                  <div className="product__links">
                    <Link to={'/' + item.id}><InfoIcon /></Link>
                    <span onClick={()=>handleAddProduct(item)}>
                      <ShoppingCartIcon/>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          )
        })}
      </div>
    </>
  )
}

说明：页面整体运行正常，其他组件用同样方式接收并调用这个函数都能正常添加商品，我怀疑是Card组件的props接收方式错了，但改完后页面就崩了。

问题根源是Card组件的props接收写法错误：

// 错误写法
const Card = (props, { handleAddProduct }) => { ... }

React组件的props是作为第一个参数传入的对象，你把第二个参数当成了解构的props，但第二个参数其实是组件的上下文（context），根本拿不到传入的handleAddProduct。

改成下面两种写法之一即可：

写法一：直接解构props #

const Card = ({ items, handleAddProduct }) => {
  return (
    <>
      <div className='card__section'>
        {items.map(item => {
          // ... 其他代码不变
          <span onClick={()=>handleAddProduct(item)}>
            <ShoppingCartIcon/>
          </span>
          // ...
        })}
      </div>
    </>
  )
}

写法二：从props对象中取值 #

const Card = (props) => {
  const handleAddProduct = props.handleAddProduct;
  return (
    <>
      <div className='card__section'>
        {props.items.map(item => {
          // ... 其他代码不变
          <span onClick={()=>handleAddProduct(item)}>
            <ShoppingCartIcon/>
          </span>
          // ...
        })}
      </div>
    </>
  )
}

这两种写法都能正确获取父组件传入的handleAddProduct函数，解决报错问题。

内容的提问来源于stack exchange，提问作者F. Lucas Picco