在以下 React 组件中设置状态不会立即更新状态

Question

我正在 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

Answer 1

useState 默认只做一件事，它设置新状态并重新渲染函数。

它本质上是异步的，所以默认情况下，通常在它之后运行的方法跑.

当您调用setKeys 时，您会触发组件的重新渲染，这将再次调用此函数。但是函数里面的console.log(keys)还是引用了useState返回的第一个值，也就是你原来的值（或者最后一个值）。

如果你想打印它，你可以通过在useEffect之外使用console.log来实现。