React子组件onClick绑定错误原因及正确写法疑问

一、错误写法的问题所在 #

你写的代码：

<button onClick={handleDelete(blog.id)}>delete</button>

这里的handleDelete(blog.id)是直接执行函数，而非传递一个点击时触发的回调。也就是说，当BlogList组件渲染的瞬间，这个函数就会立刻被调用，根本等不到你点击按钮。

而handleDelete内部调用了setBlogs，这会触发父组件Home的状态更新，进而引发重新渲染。但React有严格的渲染规则：不允许在渲染某个组件的过程中，更新另一个组件的状态。此时BlogList还处于渲染流程中，却触发了Home的状态更新，所以就抛出了错误：

Cannot update a component (Home) while rendering a different component (BlogList).

二、正确写法的原理 #

改成箭头函数的写法：

<button onClick={()=>handleDelete(blog.id)}>delete</button>

这里传递给onClick的是一个未执行的箭头函数，它相当于一个“待触发的回调”。只有当用户点击按钮时，这个箭头函数才会被执行，进而调用handleDelete(blog.id)。

这时候组件已经完成了渲染流程，调用setBlogs触发父组件状态更新完全符合React规则，自然不会报错。

另外还有一种等价写法是使用bind绑定参数：

<button onClick={handleDelete.bind(null, blog.id)}>delete</button>

原理和箭头函数一致，都是把带参数的函数包装成回调，只在点击时执行。

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