React useState触发Too many re-renders无限循环报错怎么修复？

问题根因 #

你遇到的无限重渲染问题核心不在setEmoticonThm(newEmoticonThms)这行，这行只是死循环过程中触发重渲染的连带报错点，真正的问题出在EmoticonThmButton的点击事件绑定逻辑：

onClick={setSelectedThm(index)}

你没有给onClick传入等待点击时触发的函数，而是直接调用了setSelectedThm(index)，这会导致组件每次渲染时都会立刻执行setState操作，setState又会触发组件重新渲染，重新渲染后又会再次执行setState，陷入死循环，最终触发React的重渲染次数限制报错。

修复方案 #

把onClick的回调改成函数包裹形式，只有点击的时候才会执行setSelectedThm：

写法1：箭头函数直接包裹（写法简洁） #

<EmoticonThmButton 
     key={index}
     onClick={() => setSelectedThm(index)}
 >

写法2：封装独立回调（性能更优，避免每次渲染生成新的匿名函数） #

// 组件内部提前定义回调生成函数
const handleThmSelect = (index) => () => {
  setSelectedThm(index)
}

// 渲染时绑定
<EmoticonThmButton 
     key={index}
     onClick={handleThmSelect(index)}
 >

额外优化建议 #

你当前遍历emoticonPacks生成新数组的写法可以简化，直接用map返回新数组即可，不需要额外声明空数组逐个push：

// 替换getToken内的遍历push逻辑
const newEmoticonThms = emoticon.data.emoticonPacks.map(emoticon => ({
  id: emoticon.id,
  image: url + emoticon.image
}))

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