React事件监听回调内console.log无法获取最新state值的原因及解决方案

这个问题是典型的闭包陷阱导致的：

• 你注册keydown事件监听的useEffect依赖项是空数组，只会在组件首次渲染完成后执行一次
• 首次渲染时usedLetter的初始值为[]，本次渲染生成的handleKeydown函数会捕获这个初始值作为闭包变量
• 后续组件因usedLetter更新重渲染时，会生成新的handleKeydown函数，但你没有重新注册事件监听，绑定的始终是首次渲染时的旧函数，因此函数内部读取的usedLetter永远是最初的空数组

下面提供几种可直接落地的实现方式：

方案1：补充useEffect依赖，动态更新事件监听 #

将handleKeydown加入useEffect的依赖数组，每次handleKeydown更新时自动解绑旧事件、绑定新事件，即可拿到最新的状态值：

useEffect(()=>{
  window.addEventListener('keydown', handleKeydown);
  return () => {
    window.removeEventListener('keydown',handleKeydown);
  }
},[handleKeydown]) // 新增handleKeydown作为依赖项

也可以直接把handleKeydown定义在useEffect内部，将usedLetter添加为依赖，效果完全一致。

方案2：用useRef同步状态最新引用 #

如果不想频繁执行事件的解绑/绑定操作，可以用useRef同步保存usedLetter的最新值，回调中直接读取ref.current即可拿到实时状态：

const [usedLetter,setUsedLetter] = useState([])
// 新增ref同步状态值
const usedLetterRef = useRef(usedLetter)
useEffect(()=>{
  usedLetterRef.current = usedLetter
},[usedLetter])

function handleKeydown(event){
  const letter = event.key;
  setUsedLetter(usedLetter => [...usedLetter,letter])
  // 读取ref获取最新值
  console.log(usedLetterRef.current);
}

方案3：直接在状态更新回调中取值 #

如果你只在调用setUsedLetter的同一次触发逻辑中需要拿到最新值，可以直接复用状态更新函数的入参，不需要额外新增依赖或ref：

function handleKeydown(event){
  const letter = event.key;
  setUsedLetter(prev => {
    const newUsedLetter = [...prev, letter]
    // 这里可直接拿到更新后的最新值
    console.log(newUsedLetter)
    return newUsedLetter
  })
}

这种方式改动最小，适合仅在状态更新时需要读取最新值的场景。

内容的提问来源于stack exchange，提问作者xuân nguyên hà