TypeError：无法读取未定义的属性“ bind”-ReactJS

Question

将值绑定到函数时出现以下错误。

TypeError: Cannot read property 'bind' of undefined

请参见下面的代码：

<button className={classes.ButtonStyle} onClick={props.onClickHandler.bind(null,props.id)}>{props.children}</button>

但是箭头功能表示法可以正常工作：

onClick={(e)=>{props.onClickHandler(props.id,e)}}

请问我做错了什么吗？而且我不使用基于类的组件，而仅使用基于功能的组件（钩子）。

onClickHandler函数如下：

const onClickHandler = (id, e) =>{
    e.preventDefault();
    console.log('buttonSetNullHandler', id);
}

Answer 1

如果不从整体上看程序就很难确定，但是这可能正在发生：

• 使用箭头功能样式，单击按钮时将评估props.onClickHandler。
• 采用bind样式，将在首次安装组件时执行绑定。

我的猜测是，在首次安装组件时，未设置props.onClickHandler，而是在单击按钮之前发生的后续渲染中对其进行设置。

通过在渲染函数中放置console.log(props)并查看它发生了多少次以及每次道具是什么，应该很容易进行检查。

---

顺便说一句，我个人将箭头样式设置为绑定样式-紧随您之后的开发人员，onClick={e => props.onClickHandler(props.id,e)}是likely to be much less surprising。 ：）