当用户使用 Hooks 在 React 上按下一个键时，我如何执行一个函数？

Question

我需要我的反应组件在用户按下一个键时执行一个函数 (keyUp)，但我有下一个错误：

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>
  );
}

代码在这里https://codesandbox.io/s/suspicious-ellis-zrgkt

Answer 1

是您的 setState 导致了问题。在 useEffect 挂钩中移动状态更新，每当密钥发生变化时检查密钥是否为真然后更新您的状态。

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>
  );
}

当用户使用 Hooks 在 React 上按下一个键时，我如何执行一个函数？

How Can I exec a function when user press a key on React using Hooks?

keyboard-events

reactjs

react-hooks