React中<button onClick={setCount(count+1)}>increase</button>无渲染问题咨询

你的代码核心问题：onClick={setCount(count + 1)}会在组件每次渲染时立即执行setCount，而非点击按钮时触发。状态更新会触发组件重新渲染，重新渲染又会再次执行setCount，形成无限循环，导致组件无法正常渲染内容。

修复方案有两种：

• 箭头函数包裹调用：将setCount的调用放在箭头函数中，确保仅点击按钮时执行状态更新

  <button onClick={() => setCount(count + 1)}>increase</button>
  

• 函数式更新（推荐）：当更新依赖前一次状态值时，用函数式更新可避免闭包导致的状态值过期问题

  <button onClick={() => setCount(prevCount => prevCount + 1)}>increase</button>
  

原理说明：React的onClick属性需要接收函数引用，而非函数执行后的结果。你之前的写法直接执行了setCount(count + 1)，把执行结果（undefined）传给了onClick，同时触发了无限重渲染循环。用箭头函数包裹后，onClick获取的是待执行的函数，仅在用户点击按钮时才会触发内部的状态更新逻辑。

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