React函数组件中setState设为false时返回undefined问题

核心问题 #

1. 钩子依赖缺失引发闭包异常：原useOnClickOutside钩子的useEffect仅监听event参数，但handler函数依赖ref和回调函数Cb，会导致监听逻辑引用旧值，引发执行异常。
2. 按钮点击事件冒泡干扰逻辑：点击按钮时事件会冒泡到document，触发外部点击监听逻辑，同时setState本身无返回值，控制台显示的undefined是setDisplay的正常返回结果，并非错误，但可通过优化避免混淆。

修复步骤 #

1. 修复useOnClickOutside钩子

完善依赖数组，将handler移入useEffect内部，确保依赖变化时更新监听：

import { useEffect } from "react";

export default function useOnClickOutside(ref, Cb, shouldListen) {
  useEffect(() => {
    if (!shouldListen) return;

    const handler = (e) => {
      if (ref.current && !ref.current.contains(e.target)) {
        Cb();
      }
    };

    document.addEventListener("click", handler);
    return () => document.removeEventListener("click", handler);
  }, [ref, Cb, shouldListen]);
}

2. 修改组件按钮点击逻辑

阻止事件冒泡，避免点击按钮时触发外部监听：

<button 
  className={styles.icon} 
  onClick={(e) => {
    e.stopPropagation();
    setDisplay(!Display);
  }}
>
  Click
</button>

3. 保留原有钩子调用

组件内的钩子调用无需调整，依然传递Display作为监听开关：

useOnClickOutside(modalref, ()=>setDisplay(false), Display)

额外说明 #

控制台显示的undefined是setState函数的正常返回值（setDisplay本身无返回内容），并非代码错误。修复后，点击按钮可正常切换下拉菜单状态，外部点击逻辑也能正确触发关闭操作。

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