React自定义Hook中回调无法访问state，回车提交时值为空

这是React开发中非常典型的闭包捕获旧值问题，触发逻辑可以拆解为3个环节：

• 自定义Hook内的useEffect配置了空依赖数组[]，意味着Effect逻辑只会在组件第一次挂载时执行一次
• 组件首次渲染时，传入Hook的submit回调是一个闭包，当时捕获的value状态值是初始的空字符串
• 后续在输入框输入内容触发组件重渲染时，虽然会生成绑定了最新value的新submit函数，但因为Effect没有重新执行，document上绑定的事件处理函数始终是首次渲染时生成的旧版本，从未被替换更新，触发时拿到的自然永远是空值。

方案1：修正Effect依赖，让事件监听同步最新回调 #

调整自定义Hook内的Effect依赖配置，让Effect能感知到传入回调的变化，每次生成新回调时自动清理旧的事件绑定、注册带着最新闭包的新处理函数。参考改造后的Hook代码：

function useKeyPressListener(callback?: Function, keys: string[] = ["Enter"]) {
  const handleKeyPress = (e: any) => {
    if (keys.includes(e.key)) {
      e.preventDefault();
      e.stopPropagation();
      callback?.();
    }
  };

  useEffect(() => {
    console.log("added");
    document.addEventListener("keypress", handleKeyPress);
    return () => {
      console.log("remove");
      document.removeEventListener("keypress", handleKeyPress);
    };
    // 补上依赖，确保回调更新时事件绑定同步刷新
  }, [handleKeyPress, keys]);
}

注意：如果keys是外部传入的数组类型，建议用useMemo包装成稳定引用，避免每次渲染生成新数组引用导致Effect频繁触发解绑、重绑事件。

方案2：用ref存储最新回调，保持事件绑定只初始化一次 #

如果不想因为回调更新反复解绑、重绑全局事件，可以用useRef做回调的中转存储，事件触发时直接读取ref里存的最新回调执行，全程只需要在组件挂载时绑定一次全局监听即可：

function useKeyPressListener(callback?: Function, keys: string[] = ["Enter"]) {
  // 用ref存最新的回调引用，每次渲染时同步更新
  const callbackRef = useRef(callback);
  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  useEffect(() => {
    const handleKeyPress = (e: any) => {
      if (keys.includes(e.key)) {
        e.preventDefault();
        e.stopPropagation();
        // 触发时执行ref里存储的最新回调，永远能拿到当前渲染周期的最新状态
        callbackRef.current?.();
      }
    };
    document.addEventListener("keypress", handleKeyPress);
    return () => document.removeEventListener("keypress", handleKeyPress);
  }, [keys]);
}

当前实现是把回车监听绑在全局document上，存在误触发风险：只要用户在页面任意位置按下回车，都会触发提交逻辑。如果输入框属于表单结构，更推荐用表单原生的onSubmit事件替代全局按键监听，减少不必要的代码逻辑。

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