React-Redux父传函数到子组件调用报addToCart不是函数错误如何解决

开发者阿泽

2026-9-30

问题解决方案

错误1：Jeans组件中传递addToCart属性时取值错误
你通过connect给Jeans组件注入的addToCart是挂载在this.props上的，不是类实例自身的属性，你当前写的addToCart = {this.addToCart}取到的是undefined，相当于给ProductList传了空值，自然往下传递后子组件拿到的不是函数。
修复方式：把Jeans组件里传递addToCart的代码改为addToCart = {this.props.addToCart}

错误2：中间层ProductList组件漏传属性
按照你给出的组件层级，ProductList接收到父组件传的addToCart之后，必须显式把这个属性传给渲染的每一个ProductCard子组件，否则ProductCard无法拿到该props。
修复示例（ProductList组件内渲染子组件的逻辑）：

// ProductList 组件的render逻辑参考
render() {
  const { products, addToCart, image } = this.props
  return (
    <div>
      {/* 其他渲染逻辑 */}
      {products.map(product => (
        <ProductCard 
          key={product.id}
          product={product}
          image={image}
          addToCart={addToCart} // 必须显式传递该属性
        />
      ))}
    </div>
  )
}

错误3：参数传递不匹配
你在mapDispatchToProps里定义的addToCart接收的是id参数，但子组件点击时传的是整个product对象，二者不匹配，可二选一修复：
方案A：修改子组件调用逻辑：onClick={() => addToCart(product.id)}
方案B：修改mapDispatchToProps逻辑：
```
const mapDispatchToProps = (dispatch) => {
  return {
    addToCart: (product) => {dispatch(addToCart(product.id))}
  }
}
```