React+Redux购物车加购功能报错：props.addToCartHandler不是函数

这个报错的核心触发逻辑非常明确：你在目标组件内尝试调用props.addToCartHandler时，这个属性对应的实际值不是可执行的函数，按新手开发的踩坑概率从高到低，常见原因和对应解决方式如下：

高频踩坑场景 #

• 传参命名不匹配
  这是出现概率最高的问题：父组件给子组件传函数时定义的props键名，和子组件内读取调用的键名不一致，比如父组件传的是addItem，子组件却读取props.addToCartHandler，最终取到的值是undefined，调用非函数的值就会触发当前报错。
• 函数传递时机错误
  传参时如果直接给函数加了执行括号，比如addToCartHandler={addToCartHandler(product)}，会把函数执行后的返回值（多数情况是undefined）作为props值传给子组件，子组件自然拿不到可执行的函数引用。
• 嵌套组件的props透传链路断裂
  如果产品卡片组件是嵌套在产品列表组件内部渲染的，你可能只在最外层页面定义了加购处理函数，没有把这个函数逐层级往下透传，导致最内层的产品卡片组件的props上根本没有这个方法。
• Redux连接配置错误
  如果你是用Redux管理购物车状态，大概率是mapDispatchToProps的配置缺失：
  要么没有把addToCart这个action对应的分发函数映射到组件props上，要么映射的键名和子组件调用的props名不一致；部分场景下是直接在组件里使用useDispatch获取了dispatch方法，但是没有把dispatch包裹的加购处理函数显式传给产品子组件。
• 类组件的函数绑定遗漏
  如果使用类组件开发，没有在构造函数中对加购处理函数做this绑定，或者没有用箭头函数的形式定义类方法，会导致传过去的函数引用丢失，最终子组件拿到的也不是可执行的函数。

正确实现参考 #

本地state/Context 管理场景的正确传参逻辑 #

// 父组件：产品列表页
import { useState } from 'react'
import ProductCard from './ProductCard'

function ProductPage() {
  // 本地维护购物车state
  const [cartList, setCartList] = useState([])

  // 定义加购处理函数
  const addToCartHandler = (product) => {
    setCartList(prev => [...prev, product])
  }

  return (
    <div className="product-container">
      {/* 传参时只传函数引用，不要加执行括号 */}
      <ProductCard
        product={sampleProduct}
        addToCartHandler={addToCartHandler}
      />
    </div>
  )
}

// 子组件：产品卡片
function ProductCard({ product, addToCartHandler }) {
  return (
    <div className="card">
      <p>{product.name}</p>
      {/* 绑定点击事件时再触发函数、传入参数 */}
      <button onClick={() => addToCartHandler(product)}>加入购物车</button>
    </div>
  )
}

Redux 管理场景的正确配置 #

1. 先定义对应加购action：

// store/cart/action.js
export const addToCart = (product) => ({
  type: 'cart/addToCart',
  payload: product
})

2. 组件连接Redux时正确做dispatch映射：

import { connect } from 'react-redux'
import { addToCart } from '../store/cart/action'

// 产品卡片组件内部直接读取props上的方法使用
function ProductCard({ product, addToCartHandler }) {
  return (
    <button onClick={() => addToCartHandler(product)}>加入购物车</button>
  )
}

// 配置dispatch映射，键名必须和组件内读取的props名完全一致
const mapDispatchToProps = (dispatch) => ({
  addToCartHandler: (product) => dispatch(addToCart(product))
})

// 完成组件和store的连接
export default connect(null, mapDispatchToProps)(ProductCard)

快速定位技巧 #

在报错的组件内部，拿到props后先打印一行日志：

console.log('当前组件收到的props内容：', props)

根据打印结果快速定位：

• 如果props.addToCartHandler的值为undefined：检查传参命名、透传链路、Redux映射配置这三类问题
• 如果值存在但类型不是函数：检查传参时是否不小心提前执行了函数，把返回值当成了props传递

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