React中按下Enter键无法获取最新state值的问题求助

问题原因 #

核心是闭包陷阱：

• 你通过useEffect给input手动绑定了handleKeyDown事件，但useEffect的依赖数组是空的，这意味着事件绑定只会在组件首次渲染时执行一次。此时handleKeyDown调用的handleClick捕获的是初始状态下的message（空字符串）。
• 后续message更新触发组件重新渲染时，虽然会生成新的handleKeyDown和handleClick函数，但旧的事件绑定并没有被替换，所以按下Enter时执行的还是旧版本的函数，自然拿不到最新的message。
• 而按钮的onClick是直接在JSX中绑定的，React每次渲染都会更新这个绑定，所以点击按钮时调用的是最新的handleClick，能拿到最新的message。

解决方案 #

方案一：直接在input上绑定onKeyDown（最简单）

放弃手动用ref绑定事件，直接使用React内置的事件绑定，这样每次渲染都会自动使用最新的处理函数：

import { useState } from "react";
    
function App() {
  const [message, setMessage] = useState("");

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

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

export default App;

方案二：修复useEffect的依赖与闭包

如果必须用ref绑定事件，需要给useEffect添加正确的依赖，并用useCallback包裹处理函数，确保依赖更新时重新绑定事件：

import { useState, useRef, useEffect, useCallback } from "react";
    
function App() {
  const [message, setMessage] = useState("");
  const inpt = useRef();

  const handleClick = useCallback(() => {
    console.error(message); 
  }, [message]);

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

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

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

export default App;

方案三：直接从事件目标取最新值

不需要依赖state，在handleKeyDown里直接获取input的当前值：

import { useState, useRef, useEffect } from "react";
    
function App() {
  const [message, setMessage] = useState("");
  const inpt = useRef();

  const handleKeyDown = (e) => {
    if (e.key === "Enter") {
      console.error(e.target.value);
    }
  };

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

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

export default App;

内容的提问来源于stack exchange，提问作者Sahil Nayak