此问题在此处已有答案：

The useState set method is not reflecting a change immediately（16个答案）
56分钟前关门了。
我正在React组件中侦听keypress：

import * as React from "react";
import { render } from "react-dom";

function App() {
  const [keys, setKeys] = React.useState<string[]>([]);

  React.useEffect(() => {
    const handleKeypress = (event: any) => {
      if (event.key !== "]" && event.key !== "[" && event.key !== "Enter") {
        setKeys([...keys, event.key]);
        console.log(keys)
        // if you pressed, say, `d`, this should log `['d']`,
        // but it logs `[]` instead. 
      }

      // do something with keys
    };

    document.addEventListener("keypress", handleKeypress);

    return () => {
      document.removeEventListener("keypress", handleKeypress);
    };
  }, [keys]);

  return (
    <div>
      {keys.map((key: string, idx) => (
        <li key={idx}>{key}</li>
      ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

奇怪的事情发生了。console.log(keys)会在您第一次按下某个键时记录一个空数组...但该键会显示在JSX中。
为什么会这样？如何更改代码，使console.log(keys)在您第一次按下某个键时不会记录一个空数组？我想在keys更改后立即使用它。
实时代码：https://codesandbox.io/s/changing-props-on-react-root-component-forked-bjqsxe?file=/src/index.tsx