Reactjs 当用户按下React上的键时，如何执行函数？

当用户按键时，我需要我的react组件执行一个函数，但我有下一个错误：

react-dom.development.js:55 Uncaught Invariant Violation: Too many re-renders. 
React limits the number of renders to prevent an infinite loop.

我正在使用事件键盘的挂钩：

function useKey(key) {
  const [pressed, setPressed] = useState(false)
  const match = event => key.toLowerCase() == event.key.toLowerCase()
  const onDown = event => {
    if (match(event)) {  setPressed(true) }
  }
  const onUp = event => {
    if (match(event)) { setPressed(false) }
  }
  useEffect(() => {
    window.addEventListener("keydown", onDown)
    window.addEventListener("keyup", onUp)
    return () => {
      window.removeEventListener("keydown", onDown)
      window.removeEventListener("keyup", onUp)
    }
  }, [key])
  return pressed
}

和我的组件：

function App() {
  const [state, setState] = useState("state")
  const key = useKey('ArrowUp')
  if(key){
    // TODO
    setState({...state})
  }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {state}
    </div>
  );
}

函数应用程序（）{
常量[状态，设置状态]=使用状态（“状态”）
const key=useKey（'ArrowUp'）
如果（关键）{
//待办事项
setState（{…state}）
}
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
{state}
);
}

---

代码在这里

是您的设置状态导致了问题。在useEffect钩子中移动状态更新，每当密钥发生更改时，检查密钥是否为true，然后更新您的状态

function App() {
  const [state, setState] = useState("state")
  const key = useKey('ArrowUp')
  useEffect(() => {
    if(key) setState({...state});
  }, [key])
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {state}
    </div>
  );
}

函数应用程序（）{
常量[状态，设置状态]=使用状态（“状态”）
const key=useKey（'ArrowUp'）
useffect（（）=>{
if（key）setState（{…state}）；
}，[键]）
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
{state}
);
}