按键时无法访问状态变量

Question

import { useState, useRef, useEffect } from "react";

function App() {
  const [message, setMessage] = useState("");
  const inpt = useRef();

  const handleKeyDown = (e) => {
    if (e.key === "Enter") {
      handleClick();
    }
  };

  useEffect(() => {
    inpt.current.addEventListener("keydown", handleKeyDown);
    return () => inpt.current.removeEventListener("keydown", handleKeyDown);
  }, []);

  function handleClick() {
    console.error(message); 
  }
  return (
    <>
      <div>
        <input ref={inpt} type="text" name="" id="" value={message} onChange={(e)=> setMessage(e.target.value)} />
        <button onClick={handleClick}>click</button>
      </div>
    </>
  );
}

export default App;

我注意到，当我单击按钮时，我可以访问输入状态变量的值，但是当我按“Enter”键时，我无法访问更新的状态值，它显示默认的“”值。

你们能帮我理解为什么会发生这种情况以及我应该做什么吗？

Answer 1

由于您在

useEffect

钩子中使用空依赖数组，因此在由于状态更改而重新渲染时，其清理函数将不会被执行，并且

ref

将继续指向陈旧的

input

元素。 为了避免这种情况，您应该添加

message

的

handleKeydown

作为依赖项。

useEffect(() => {
    inpt.current.addEventListener("keydown", handleKeyDown);
    return () => inpt.current.removeEventListener("keydown", handleKeyDown);
  }, [message]);