React中Keydown事件与onClick表现不一致问题求助

问题本质是React Hook的闭包陷阱：

• 你的useEffect依赖数组为空，只会在组件首次挂载时执行1次，此时绑定的handleKeypress函数来自首次渲染的闭包，闭包里捕获的curImage永远是初始值0
• 后续触发的键盘事件永远调用的是这个旧的handleKeypress，执行leftClick/rightClick时永远基于0做计算，所以第一次按键得到-1/1后，后续按键永远只会跳这两个值
• 点击事件正常是因为每次组件重新渲染都会生成新的leftClick、rightClick，按钮绑定的永远是最新函数，可以拿到当前的curImage值

方案1（最简便，推荐）：使用函数式更新state #

修改leftClick和rightClick的更新逻辑，直接从React拿到最新的state值计算，不依赖外部闭包的curImage：

function leftClick() {
  move(prev => prev - 1);
}

function rightClick() {
  move(prev => prev + 1);
}

不需要修改其他代码即可正常运行。

方案2：调整useEffect依赖 #

把curImage加到useEffect的依赖数组中，每次curImage变化时重新绑定最新的键盘事件处理函数，就能拿到最新的curImage值：

useEffect(() => {
  document.addEventListener("keydown", handleKeypress);
  return () => document.removeEventListener("keydown", handleKeypress);
}, [curImage]);

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