React传递函数作为props onClick触发时报onAddToCart不是函数错误

实现加入购物车功能时，将加购处理函数作为props逐层传递给底层加购按钮，点击按钮时控制台抛出如下错误：

TypeError: onAddToCart is not a function

相关实现代码如下：

加购处理函数定义（父组件内） #

const handleAddToCart = async(productId,quantity) => 
{
  const item = await commerce.cart.add(productId,quantity)
  setCart(item.cart)
}

Product组件（包含加购按钮逻辑） #

import React from 'react'

const Product = ({product, onAddToCart}) => {
  return(
    // 商品卡片容器
    <div className="rounded overflow-hidden shadow-lg">
      <img 
        className="object-contain h-20 w-20" 
        src={product.image.url} 
        alt={product.name}
      />
      <div className="px-1 py-1">
        <div className="text-s">{product.name}</div>
      </div>

      <button 
        className="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded inline-flex items-center"
        onClick={() => onAddToCart(product.id, 1)}
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <path d="M24 3l-.743 2h-1.929l-3.474 12h-13.239l-4.615-11h16.812l-.564 2h-13.24l2.937 7h10.428l3.432-12h4.195zm-15.5 15c-.828 0-1.5.672-1.5 1.5 0 .829.672 1.5 1.5 1.5s1.5-.671 1.5-1.5c0-.828-.672-1.5-1.5-1.5zm6.9-7-1.9 7c-.828 0-1.5.671-1.5 1.5s.672 1.5 1.5 1.5 1.5-.671 1.5-1.5c0-.828-.672-1.5-1.5-1.5z"/>
        </svg>
      </button>
    </div>
  )
}

export default Product

ProductsContainer组件（遍历渲染商品列表） #

const ProductsContainer = ({products, onAddToCart}) => {
  return(
    <div className="container mx-auto"> 
      <div className="grid grid-cols-3 gap-2 auto-rows-max">
        {/* 遍历渲染单商品卡片 */}
        {products.map((product) => { 
          return <Product product={product} key={product.id} onAddToCart={onAddToCart}/>
        })}
      </div>
    </div>
  )
}

export default ProductsContainer

父组件调用ProductsContainer代码 #

<ProductsContainer products={products} onAddToCart={handleAddToCart}/>

• 检查传参写法：确认传递prop时传入的是函数引用，没有错误添加括号执行函数（比如错写为onAddToCart={handleAddToCart()}），这种写法会将函数执行后的返回值作为prop传递，而非函数本身。
• 检查作用域问题：确认handleAddToCart函数定义在父组件的顶层作用域，没有被放在条件判断块、useEffect回调、其他自定义函数内部，避免父组件渲染时拿不到有效的函数引用。
• 检查命名一致性：逐层核对传递链路中的prop名称，确认没有拼写错误、大小写不匹配问题（比如错写为onAddtoCart、onaddtocart等）。
• 检查分支漏传：如果父组件存在条件渲染ProductsContainer、动态给onAddToCart赋值的逻辑，确认所有渲染分支下传入的都是合法函数类型，没有传入undefined、对象、字符串等非函数值。
• 检查组件导入导出：确认Product、ProductsContainer组件的导入导出匹配，没有导入错误的组件实例导致props接收异常。
• 检查变量覆盖：确认父组件、中间层组件内没有同名变量重复声明，覆盖了原本要传递的函数引用。

1. 先逐层打日志定位问题断点
   分别在三个节点打印onAddToCart的类型，快速定位是哪一层传递出现值丢失：

   // 父组件传递ProductsContainer前打印
   console.log('父层函数类型：', typeof handleAddToCart)
   <ProductsContainer products={products} onAddToCart={handleAddToCart}/>
   
   // ProductsContainer组件内、传递给Product前打印
   const ProductsContainer = ({products, onAddToCart}) => {
     console.log('中间层接收类型：', typeof onAddToCart)
     // 原有渲染逻辑
   }
   
   // Product组件内、绑定onClick前打印
   const Product = ({product, onAddToCart}) => {
     console.log('组件层接收类型：', typeof onAddToCart)
     // 原有渲染逻辑
   }
   

2. 根据定位结果修复对应问题
   • 如果父层打印出来类型不是function：把handleAddToCart的定义移到父组件函数体顶层，不要嵌套在其他代码块内；如果是用useCallback包裹的版本，检查依赖项配置是否正确，确保函数在组件首次渲染时就完成初始化；如果是传参时多打了括号，去掉括号直接传函数引用即可。
   • 如果父层类型正常、中间层类型异常：检查ProductsContainer的props解构语法，确认prop名拼写完全一致，没有解构错误。
   • 如果中间层类型正常、组件层类型异常：检查遍历渲染Product时的prop传值，确认名称拼写正确，没有漏传。
3. 增加容错兜底逻辑
   在按钮点击事件中增加类型判断，避免值异常时直接阻塞页面：

   <button 
     className="bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded inline-flex items-center"
     onClick={() => {
       if (typeof onAddToCart === 'function') {
         onAddToCart(product.id, 1)
       } else {
         console.error('加购函数异常，当前值：', onAddToCart)
       }
     }}
   >
     {/* 原有svg内容 */}
   </button>
   

内容的提问来源于stack exchange，提问作者rohit