为何使用React useState钩子时调用状态更新函数出现异常？

你写的第一段代码里有两个关键问题，直接导致了页面空白：

• 未定义变量触发渲染报错：你在return的JSX里写了{test + 1}，但代码里从来没声明过test变量，React渲染时遇到未定义的变量会直接抛出错误，这是页面空白的直接诱因。

• 渲染阶段调用setCount导致无限重渲染：React组件的函数体每次渲染都会完整执行一遍，你直接在函数体里调用setCount(1)，会立刻触发组件重新渲染；新的渲染流程又会执行到setCount(1)，再次触发渲染，形成无限循环。React检测到这种异常循环后会终止渲染，最终页面呈现空白。

而第二段代码能正常运行的核心原因：setCount是在事件处理函数里调用的，这类函数只会在用户触发对应事件（比如点击按钮）时才执行，不会在组件的常规渲染阶段自动运行，所以只会在点击时触发一次正常的状态更新和重渲染，不会陷入循环。

额外补充：如果需要在组件初始化时设置状态，直接把初始值传给useState即可，比如const [count, setCount] = useState(1)；如果是组件挂载后需要执行的状态更新（比如接口请求后更新），应该用useEffect钩子，示例如下：

useEffect(() => {
  setCount(1);
}, []); // 空数组依赖表示只在组件挂载时执行一次

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