React自定义Hook问题：重复按键仅返回两次，如何实现按次数返回按键？

云上老周

2026-8-5

解决重复按键仅返回两次的问题

你的问题出在：当连续按下同一个按键时，setKey(e.key)设置的状态值和当前key完全相同，React会跳过这次状态更新（因为React认为状态没有变化），所以后续的按键事件虽然触发了，但外部组件无法感知到状态更新，看起来就像只返回了两次按键。

下面提供两种解决方案，根据你的需求选择：

方案一：确保每次按键都触发状态更新（仅返回当前按键）

通过使用包含按键值和唯一标识的对象，让每次setState都生成新的引用，强制React触发更新：

import { useEffect, useState } from "react"

function useKeyPressed() {
  // 用对象存储按键信息，加入时间戳确保每次更新引用不同
  const [keyInfo, setKeyInfo] = useState({ key: "", timestamp: 0 })

  const handle = (e) => {
    setKeyInfo({ key: e.key, timestamp: Date.now() })
  }

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

  // 返回当前按下的按键值
  return keyInfo.key
}

方案二：记录所有按键历史（可返回完整序列或最后一次按键）

如果需要追踪所有按键的顺序，可以用数组存储历史记录：

import { useEffect, useState } from "react"

function useKeyPressed() {
  const [keyHistory, setKeyHistory] = useState([])

  const handle = (e) => {
    // 每次按键都往数组末尾添加新的按键值
    setKeyHistory(prevHistory => [...prevHistory, e.key])
  }

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

  // 返回最后一次按下的按键，若需要完整历史可直接返回keyHistory
  return keyHistory.at(-1) || ""
}