Next/React组件onClick绑定函数触发无限渲染及bind报错问题求解

问题原因 #

1. 无限调用的原因：你在onClick中直接写loadStats(stats.player)，相当于组件每次渲染时都会立即执行这个函数，函数内部调用setTeams会触发组件重渲染，陷入「渲染→执行函数→setTeams→重渲染」的死循环。
2. bind is not a function报错的原因：loadStats(stats.player).bind(...)的执行顺序是先调用loadStats拿到返回值（这是个Promise对象），再对Promise调用bind方法，而Promise本身没有bind方法，所以报错。bind是函数的方法，需要作用在函数本身，而非函数执行后的返回值。

解决方案 #

有三种常用的修正方式，按需选择即可： #

方式1：箭头函数包裹（最常用，写法最简单）

把onClick的值改成匿名箭头函数，仅在点击时才触发内部的loadStats调用：

<button 
  value={stats.player} 
  onClick={() => loadStats(stats.player)}
>
  {stats.player}
</button>

方式2：正确使用bind

bind的第一个参数是函数执行时的this指向，你的loadStats是箭头函数，this已经被静态绑定，所以传null即可，后续参数是预传给loadStats的入参：

<button 
  value={stats.player} 
  onClick={loadStats.bind(null, stats.player)}
>
  {stats.player}
</button>

方式3：通过事件对象取按钮的value值

你已经给按钮设置了value={stats.player}，可以直接从点击事件的目标对象上取值，不需要额外传参：

<button 
  value={stats.player} 
  onClick={(e) => loadStats(e.target.value)}
>
  {stats.player}
</button>

额外注意事项 #

React中给元素设置CSS类需要用className属性，而非原生的class，否则你写的class="flex-child"不会生效，改成className="flex-child"即可。

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