React Hooks 自定义按键Hook触发后状态未更新问题

问题本质是自定义useKeypress Hook存在陈旧闭包（Stale Closure）捕获旧状态的问题，具体逻辑链路如下：

• useKeypress内部用于绑定键盘事件的useEffect依赖数组配置为空数组[]，意味着窗口上的keyup事件监听器只会在组件首次挂载时创建一次，后续组件重渲染时不会销毁、重建。
• 这个固定留存的监听器中绑定的action回调，是组件首次渲染时传入的版本：该版本的changeTemplate函数闭包捕获了初始渲染时的状态值currentTemplate = 0，后续组件状态更新后生成的新changeTemplate函数，永远不会被传递给已经绑定完成的事件监听器。

你观测到的所有故障表现，完全对应陈旧闭包的行为特征：

• 连续按两次右键：每次触发事件时，执行的都是首次渲染时的changeTemplate(true)，基于捕获的初始值0计算得到目标index=1。第一次按下时状态从0更新为1，第二次按下时计算出的目标值仍然是1，和当前状态值一致，React会跳过无变化的状态更新，自然不会触发对应useEffect执行。
• 从右键切换为按左键：触发首次渲染时绑定的changeTemplate(false)，基于捕获的初始值0计算得到index=-1，经循环逻辑取到数组最后一位3（对应模板square）。这个值和当前状态1不一致，会触发一次重渲染、执行useEffect打印日志。
• 从左键再切换回按右键：再次触发首次渲染时绑定的changeTemplate(true)，计算结果为index=1（对应模板line），和当前状态3不一致，触发一次重渲染执行useEffect。
• 全程因为事件监听器永远拿不到更新后的currentTemplate值，每次计算新index都是基于初始值0做偏移，自然状态值永远不会累计推进，始终在两个固定的取值区间循环。

• 修复useKeypress Hook的闭包问题：可以通过ref存储最新的action引用，让事件监听器永远调用最新的回调；或者将action加入Hook内部useEffect的依赖数组，在回调更新时重新绑定事件。
• 编写changeTemplate时使用函数式状态更新：调用setCurrentTemplate(prevIndex => { 基于prevIndex计算新值 })，从根本上避免回调依赖闭包捕获的旧状态。

内容的提问来源于stack exchange，提问作者M.S.