React useState传入函数调用报错无法访问变量是什么原因？

差异原因 #

1. 两种useState写法的执行逻辑完全不同 #

• 带括号的写法 useState(getKgFormValues())：会在代码执行到当前行时立即调用getKgFormValues函数，将函数返回值直接作为useState的初始值
• 不带括号的写法 useState(getKgFormValues)：属于React useState的惰性初始化特性，仅把getKgFormValues函数本身作为参数传递给useState，React只会在组件首次渲染执行到Hook逻辑时，才会调用这个函数取初始值

2. 报错的核心是JS变量的暂时性死区规则 #

报错提示ReferenceError: Cannot access 'kgFormValues' before initialization，说明你定义的getKgFormValues函数内部存在对kgFormValues变量的引用：

• 带括号写法下，getKgFormValues在变量声明行就立即执行，此时kgFormValues还没完成赋值，处于暂时性死区，访问直接抛出引用错误
• 不带括号写法下，getKgFormValues的实际调用时机晚于当前变量声明赋值的流程，此时kgFormValues已经完成初始化，不会触发报错

补充：如果你的getKgFormValues不需要依赖kgFormValues本身，两种写法理论上都可以正常运行，惰性初始化的写法更适合初始值计算开销大的场景，能避免不必要的重复计算。

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