时间戳

首页 > 解决方案 > 无法更新 keyDown 上的状态挂钩

javascript - 无法更新 keyDown 上的状态挂钩

问题描述

我正在尝试更新 SpaceBar 上的状态，但状态值似乎没有改变（总是打印 0）

这是我尝试过的：

import './App.css';
import { useState, useEffect} from 'react';

function App() {

    const [counter, setCounter] = useState(0);

    const keyHandler = () => {
        switch (e.keyCode) {
            case 32:
                setCounter(counter + 1);
                console.log(counter)
                break;
        }
    }

    useEffect(() => {
        document.addEventListener("keydown", e => keyHandler(e));
    }, [])
    
    return (
        <div className="App">
            {counter}
        </div>
    );
}

export default App;

更新：

对于未来的您，请阅读有关反应中的闭包以及如何处理它们的信息，
我发现这篇文章（以及此处接受的答案）非常有用： https ://dmitripavlutin.com/react-hooks-stale-closures/

标签： javascriptreactjsreact-hooks

解决方案

您的keyHandler回调关闭了您的状态值，因此不会对更新做出反应。见关闭

const App = () => {
  const [counter, setCounter] = React.useState(0);

  const keyHandler = (e) => {
    switch (e.keyCode) {
      case 32:
        setCounter((counter) => counter + 1);
        break;
      default:
      // do nothing
    }
  };

  React.useEffect(() => {
    document.addEventListener("keydown", keyHandler);

    return () => document.removeEventListener("keydown", keyHandler);
  }, []);

  return (
    <div className="App">
      <button>click me</button>
      {counter}
    </div>
  );
};

ReactDOM.render(<App />, document. getElementById('root'))
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<div id="root"></div>

推荐阅读