React useState hook点击仅更新一次 onClick触发布尔值切换如何解决

你的问题本质是React状态的闭包快照特性导致的取值过期：

• React组件每次渲染时都会生成独立的运行闭包，你定义的onClick回调中捕获的sound变量，是当前本次渲染对应的固定状态值，不会随后续状态变化实时更新。
• 直接使用setSound(!sound)的写法，依赖的是当前闭包中的旧状态值。首次渲染时sound为false，第一次点击会成功更新为true；如果回调函数因为被缓存（比如用了未添加sound依赖的useCallback）、或者状态批量更新等场景，后续点击时回调拿到的sound永远是最初的false，取反后永远是true，所以状态无法切回false。
• 你代码里的console.log打印的也是当前闭包的旧值，并不是更新后的状态，也可以验证这个特性。

你用到的函数式更新就是官方推荐的标准解法：
给setSound传入更新函数而非直接传值时，React会自动将最新的状态作为参数传入该函数，完全不受闭包旧值的影响，永远能基于当前最新的状态取反切换：

setSound((prevSound) => !prevSound)

如果你需要打印更新后的状态，可以通过useEffect监听状态变化实现：

useEffect(() => {
  console.log("sound状态更新为", sound);
}, [sound]);

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