React组件按下回车键调用函数时socketId和msg参数为undefined如何解决

• 变量未在当前作用域声明：你提供的代码片段中没有在组件作用域内定义socketId和msg变量，调用handleMessage时找不到对应值，自然传入undefined。如果你实际代码中已经通过useState等方式声明了这两个变量，则属于下面的闭包问题。
• 闭包陷阱导致拿不到最新状态：你的useEffect依赖数组为空，仅会在组件首次挂载时执行一次，内部绑定的键盘事件监听器捕获的是首次渲染时的作用域变量。后续socketId、msg状态更新后，监听器内读取的还是首次渲染时的旧值，如果初始值为undefined就会一直返回undefined。

方案1：补全useEffect依赖 #

首先确认组件内已经正确声明socketId和msg状态：

const [socketId, setSocketId] = useState('')
const [msg, setMsg] = useState('') // 一般和输入框的value绑定，输入时更新状态

将socketId和msg添加到useEffect的依赖数组中，状态变化时会重新绑定监听器，读取最新的状态值：

useEffect(() => {
  const listener = event => {
    if (event.code === "Enter" || event.code === "NumpadEnter") {
      console.log("Enter key was pressed. Run your function.");
      event.preventDefault();
      handleMessage(socketId, msg)
    }
  };
  document.addEventListener("keydown", listener);
  return () => {
    document.removeEventListener("keydown", listener);
  };
}, [socketId, msg]); // 新增依赖项

方案2：用useRef存储最新值（避免频繁解绑重绑监听器） #

如果不想因为状态变化频繁操作事件监听，可以用useRef存储最新的状态值，useEffect不需要加额外依赖：

const [socketId, setSocketId] = useState('')
const [msg, setMsg] = useState('')
// 声明ref存储最新状态
const latestValRef = useRef({
  socketId,
  msg
})
// 状态更新时同步到ref
useEffect(() => {
  latestValRef.current = {
    socketId,
    msg
  }
}, [socketId, msg])

useEffect(() => {
  const listener = event => {
    if (event.code === "Enter" || event.code === "NumpadEnter") {
      console.log("Enter key was pressed. Run your function.");
      event.preventDefault();
      // 从ref读取最新值
      const { socketId, msg } = latestValRef.current
      handleMessage(socketId, msg)
    }
  };
  document.addEventListener("keydown", listener);
  return () => {
    document.removeEventListener("keydown", listener);
  };
}, []); // 无需添加依赖

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