React中props传参时父组件函数渲染阶段自动执行问题求解

触发原因 #

React 事件绑定属性onClick需要接收函数引用作为值，你直接书写onClick={handleViewMore(marble)}时，JSX 渲染阶段就会立即执行handleViewMore(marble)，把函数执行后的返回值（默认是undefined）赋值给onClick，所以会出现渲染时自动触发、点击时无响应的问题。

修正方案 #

两种常用的修正方式：

方式1：箭头函数包裹（推荐） #

在子组件 Button 的onClick处用匿名箭头函数包裹调用逻辑，只有点击事件触发时才会执行内部的函数调用：

// Angle 子组件内的 Button 绑定代码修改为
<Button onClick={() => handleViewMore(marble)} variant="text">VIEW MORE</Button>

方式2：使用 bind 预绑定参数 #

通过bind方法将marble参数预先绑定到handleViewMore函数上，返回一个新的函数引用给onClick：

// Angle 子组件内的 Button 绑定代码修改为
<Button onClick={handleViewMore.bind(null, marble)} variant="text">VIEW MORE</Button>

bind第一个参数为函数执行时的this指向，你的场景下不需要指定this，传null即可。

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