React开发中onClick绑定方法时对象无法传递问题求解

1. onClick={this.handleIncrement(product)} 报错的核心原因 #

这种写法会在render函数执行时直接调用handleIncrement方法，而非将其作为点击事件的回调函数绑定给onClick。此时render的作用域内并没有定义过product变量，自然会抛出product is not defined的未定义错误。

同时你之前写的onClick={this.handleIncrement({ id: 1 })}也存在同类问题：页面渲染阶段就会自动执行一次handleIncrement，且点击按钮时不会触发任何逻辑——因为你传给onClick的是handleIncrement执行后的返回值（默认是undefined），不是可执行的函数。

2. onClick={() => this.handleIncrement({ id:1 })} 正常运行的原因 #

这里你给onClick传递的是一个匿名箭头函数，只有当点击事件真实触发时，这个匿名函数才会执行，内部才会调用handleIncrement并传入你定义的{id:1}自定义对象。渲染阶段仅仅是定义了这个函数，没有执行，既不会触发变量报错，也不会提前执行计数逻辑。

3. onClick={(product) => this.handleIncrement(product)} 正常运行的注意点 #

这里的product实际上是React触发点击事件时，默认传给回调函数的原生事件对象Event，并不是你业务层面定义的商品对象。只是你当前在handleIncrement里只打印了参数、没有使用参数的具体属性，所以看起来运行正常，本质上和你想要传递自定义业务对象的需求并不匹配。

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