React中多个useState仅一个生效求助：func与func2无法正常工作

我定义了3个useState，其中布尔类型的boola可以正常工作，但func和func2对应的useState无法正常生效，页面显示内容未按照初始useState值渲染：

• 代码说明：代码中定义了三个useState，分别是const [boola, setBoola] = useState(true)、const [func, setFunc] = useState(() => console.log("func"))、const [func2, setFunc2] = useState(() => "func2")，并在页面中渲染boola的值、调用func()以及显示func2()的结果。
• 页面效果说明：页面显示boola的值为true（正常），func()执行后无输出，func2()显示结果为空（未按预期显示"func2"）。

问题原因及解决办法 #

1. 函数类型状态的初始化逻辑误解 #

useState的参数如果是函数，React会将其视为初始化函数——只在组件首次渲染时执行该函数，并把返回值作为初始状态，而不是把函数本身存入状态。如果你的需求是把函数本身作为状态值，需要用一个外层函数包裹它：

// 错误写法：React执行传入的函数，把返回值作为初始状态
const [func, setFunc] = useState(() => console.log("func"));
const [func2, setFunc2] = useState(() => "func2");

// 正确写法：返回函数本身作为初始状态
const [func, setFunc] = useState(() => () => console.log("func"));
const [func2, setFunc2] = useState(() => () => "func2");

2. 渲染时的调用修正 #

当你需要使用状态中的函数时，要注意调用时机：

• 如果是在渲染阶段展示函数执行结果，需要确保函数被正确调用；
• 如果是触发函数执行（比如func()），建议放在事件回调或useEffect中，避免渲染阶段不必要的执行。

3. 状态更新的引用稳定性 #

如果后续需要更新函数类型状态，确保传入新的函数引用，或者使用useCallback包裹函数来稳定引用，避免因引用未变化导致React不触发重新渲染。

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