React绑定全局enter按键事件时组件state值为空问题求解

你的问题本质是React的闭包陷阱：你给useEffect传的依赖数组为空，所以这个副作用只会在组件首次渲染时执行一次，此时注册的enterHandler函数捕获的是首次渲染时的searchState值（也就是初始的空字符串）。后续searchState更新触发组件重渲染时，会生成新的enterHandler函数（可以访问到最新的state），但你没有更新全局的事件监听，触发的永远是第一次注册的旧函数，自然拿不到最新的state值。

三种常用方案按需选择即可：

• 方案1：给useEffect补充正确依赖 + 事件清理
  把searchState加入useEffect的依赖数组，同时在副作用的清理函数中移除旧的事件监听，每次searchState更新后都会重新注册最新的事件回调，就能拿到最新的state值。

  useEffect(() => {
    const enterHandler = (evt: any) => {
      if ((evt.which && evt.which === 13) || (evt.keyCode && evt.keyCode === 13)) {
        console.log(`Enter value ${searchState}`);
        return false;
      }
    };
    document.body.addEventListener('keypress', enterHandler);
    // 组件卸载/依赖更新时清理旧事件，避免内存泄漏
    return () => {
      document.body.removeEventListener('keypress', enterHandler);
    };
  }, [searchState]); // 把依赖的state加入依赖数组
  

• 方案2：用useRef存储最新state（适合依赖项多的场景）
  用ref同步最新的state值，全局事件回调直接读取ref的current属性即可，不需要给useEffect加额外依赖，也不会触发重复注册事件。

  const [searchState, setSearchState] = React.useState('');
  // 声明ref同步state值
  const searchStateRef = React.useRef(searchState);
  // state变化时更新ref的current值
  useEffect(() => {
    searchStateRef.current = searchState;
  }, [searchState]);
  
  useEffect(() => {
    const enterHandler = (evt: any) => {
      if ((evt.which && evt.which === 13) || (evt.keyCode && evt.keyCode === 13)) {
        // 直接读取ref的最新值即可
        console.log(`Enter value ${searchStateRef.current}`);
        return false;
      }
    };
    document.body.addEventListener('keypress', enterHandler);
    return () => {
      document.body.removeEventListener('keypress', enterHandler);
    };
  }, []); // 不需要加任何依赖
  

• 方案3：使用React18+的useEvent Hook（最简洁的推荐方案）
  如果你使用React18及以上版本，可以用官方提供的useEvent Hook包裹事件回调，包裹后的回调永远能访问到最新的state和props，不需要添加任何依赖项。

  // 用useEvent包裹回调
  const enterHandler = React.useEvent((evt: any) => {
    if ((evt.which && evt.which === 13) || (evt.keyCode && evt.keyCode === 13)) {
      console.log(`Enter value ${searchState}`);
      return false;
    }
  });
  
  useEffect(() => {
    document.body.addEventListener('keypress', enterHandler);
    return () => {
      document.body.removeEventListener('keypress', enterHandler);
    };
  }, []); // 不需要加任何依赖
  

注意：所有全局事件监听都必须在useEffect的清理函数中移除，避免组件卸载后事件残留引发内存泄漏和异常逻辑。

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