React报错Too many re-renders：handleSortByChange触发无限循环求助

嘿，这个问题我太熟了！你遇到的无限重渲染问题，根源就在renderSortByOptions方法里的onClick绑定上：

return <li onClick={handleSortByChange(sortByOptionValue)} ...>{sortByOption}</li>

问题原因 #

当React渲染这个<li>元素时，它会立即执行handleSortByChange(sortByOptionValue)，而不是把它作为点击事件的回调函数。每次调用setSortBy都会触发组件重新渲染，重新渲染时又会再次执行这个函数，直接形成了无限循环——这就是浏览器报错的原因，终端编译成功是因为语法上完全没问题，只是运行时逻辑出了bug。

解决方案 #

有两种简单的修复方式，选哪种都可以：

方法1：用箭头函数包裹回调

把onClick的绑定改成箭头函数，这样只有当用户点击时才会调用handleSortByChange：

return <li onClick={() => handleSortByChange(sortByOptionValue)} className={getSortByClass(sortByOptionValue)} key={sortByOptionValue}>{sortByOption}</li>

方法2：让事件处理函数返回一个函数

修改handleSortByChange，让它返回一个内部函数，这样直接绑定的时候不会立即执行，只有点击时才会触发内部的setSortBy：

const handleSortByChange = (sortByOption) => {
  return () => {
    setSortBy(sortByOption);
  }
}

这种情况下你原来的onClick={handleSortByChange(sortByOptionValue)}写法就可以正常工作了。

两种方法都能解决无限重渲染的问题，选你觉得更顺手的就行～

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