React中useCallback返回n+1次、自定义右键菜单多次触发如何解决

问题根源 #

• 事件监听重复绑定：你的useEffect依赖数组为空，仅会在组件挂载时执行一次绑定逻辑。但handleContextMenu、handleClick作为useCallback包裹的函数，会在依赖变化时生成新的实例，旧的事件监听没有被及时解绑，组件多次渲染就会导致同一个事件被绑定多个回调，触发时自然会执行多次，这也是你单次右键触发6次、双击触发5次的核心原因。
• useCallback依赖不全：handleContextMenu中使用了setMenuTarget、setMenuTargetId两个状态更新函数，虽然React保证state的setter函数稳定不会变化，但不符合Hooks依赖规则的写法容易引发闭包陷阱。
• 状态更新的异步特性：React的状态更新是异步批量执行的，你在事件回调中调用的所有setXXX函数，都会等到当前回调执行完毕后才会统一触发状态更新，因此不可能在回调返回前校验状态是否更新完成。

解决方案 #

1. 修正useEffect依赖，将事件处理函数加入依赖数组，保证每次函数更新时都会先解绑旧监听、绑定新监听，避免重复触发。
2. 补全useCallback的依赖项，避免闭包问题。
3. 把菜单展开关联到所有必填状态的校验逻辑，单独用useEffect实现，确保所有状态都更新完成后才展示菜单。

修正后代码如下：

const ContextMenu = outerRef => {
  const [xPos, setXPos] = useState("0px");
  const [yPos, setYPos] = useState("0px");
  const [menu, showMenu] = useState(false);
  const [menuTarget, setMenuTarget] = useState('');
  const [menuTargetId, setMenuTargetId] = useState('');

  const handleContextMenu = useCallback(
    event => {
      if(event.target.className && (event.target.className.includes('bar') ||event.target.className == 'timeline' || event.target.className == 'draggablediv' || event.target.className == 'editableDiv')){
         event.preventDefault();
         if (outerRef?.current?.contains(event.target)) {
            // 先更新所有菜单需要的状态
            setXPos(`${event.pageX}px`);
            setYPos(`${event.pageY}px`);
            setMenuTarget(event.target.className)
            setMenuTargetId(event.target.id)
         } else {
             showMenu(false);
         }
       }
    },[outerRef]); // setState函数是React保证稳定的，不需要加入依赖

  const handleClick = useCallback(() => {
    showMenu(false);
  }, []); // showMenu是稳定的setter，不需要加入依赖

  // 新增：校验所有必填状态是否齐全，齐全才展示菜单
  useEffect(() => {
    if (xPos && yPos && menuTarget && menuTargetId) {
      showMenu(true);
    }
  }, [xPos, yPos, menuTarget, menuTargetId]);

  // 修正：事件处理函数加入依赖，每次更新时重新绑定
  useEffect(() => {
    document.addEventListener("click", handleClick);
    document.addEventListener("contextmenu", handleContextMenu);
    return () => {
      document.removeEventListener("click", handleClick);
      document.removeEventListener("contextmenu", handleContextMenu);
    };
  }, [handleClick, handleContextMenu]);

  return {xPos, yPos, menu, menuTarget, menuTargetId};
};

修正后首先解决了重复绑定的问题，回调只会触发一次。其次把菜单展示的逻辑和状态更新解绑，所有必填状态都更新完成后才会触发菜单展示，不会出现展示时状态不全的问题。

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