React中直接调用setter与传函数更新state的差异及报错解析

错误成因 #

直接看第一个按钮的代码：onClick={setLaser("laser activated")}，这里的问题和React Hooks的异步特性无关，纯粹是写法错误——你直接调用了状态更新函数setLaser，而不是把事件处理函数传给onClick。

组件渲染时，JSX会被逐行解析执行，这行代码里的setLaser("laser activated")会立刻运行，触发laser状态更新，状态一变组件就会重新渲染。重渲染时，这行代码又会再次执行setLaser，再次触发重渲染，如此往复形成无限循环，React为了防止应用崩溃，就抛出了“触发过多重渲染”的错误。

为什么传递函数的写法能正常工作 #

第二个按钮的onClick={() => setState("clicked")}，这里传给onClick的是一个箭头函数。这个箭头函数不会在组件渲染时立即执行，只有当用户点击按钮的瞬间，这个箭头函数才会被调用，里面的setState("clicked")才会执行，触发状态更新和组件重渲染。整个流程完全符合“点击按钮才触发状态变更”的预期，自然不会出现无限循环。

点击事件中两种调用方式的区别 #

这里要分成两个层面来说：

1. 事件绑定层面的本质区别 #

• 错误写法（直接调用状态更新函数）：onClick={setState("xxx")}
onClick属性要求接收一个函数作为事件处理器，但你这里直接执行了setState，把setState的返回值（undefined）传给了onClick，同时还在组件渲染阶段就触发了状态更新，直接导致无限循环，这是完全错误的事件绑定方式。
• 正确写法（传递事件处理函数）：onClick={() => setState("xxx")}
  把一个箭头函数传给onClick，这个函数只会在点击事件触发时才执行，进而调用状态更新函数，完全符合事件触发的逻辑。

2. 状态更新时的两种形式（值 vs 函数） #

另外补充一个容易混淆的点：当新状态依赖于前一个状态时（比如计数场景setCount(count + 1)），推荐传递函数给状态更新函数，比如setCount(prevCount => prevCount + 1)。因为React的状态更新是异步批量处理的，直接用count + 1可能拿到的是旧的状态值，而传递函数的话，React会保证给你最新的前一个状态，确保更新结果准确。这是状态更新本身的区别，和事件绑定的写法是两个层面，但经常被一起问到。

代码示例 #

import { useState } from "react";

export default function App() {
  const [state, setState] = useState("");
  const [laser, setLaser] = useState("");

  return (
    <div className="App">
      <p>{state}</p>
      <p>{laser}</p>

      {/* 错误写法：渲染时立即调用setLaser，导致无限循环 */}
      <button onClick={setLaser("laser activated")}>Activate Lasers</button>

      {/* 正确写法：点击时才执行setState */}
      <button onClick={() => setState("clicked")}>Click Me</button>
    </div>
  );
}

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