如何在页面跳转或刷新时调用editMode函数关闭编辑模式？

要在用户导航至其他页面或刷新页面时调用editMode函数，分两种场景处理：

1. 单页应用内导航（路由变化） #

如果你的项目使用React Router，可以通过监听路由变化触发函数：

import { useEffect, useCallback } from 'react';
import { useLocation } from 'react-router-dom';

function YourComponent() {
  const location = useLocation();

  // 用useCallback稳定函数引用，避免重复绑定监听
  const editMode = useCallback(() => {
    // 这里写你的关闭编辑模式逻辑
    console.log('执行关闭编辑模式');
  }, [/* 这里填editMode依赖的状态/Props */]);

  // 路由变化时调用editMode
  useEffect(() => {
    return () => {
      editMode();
    };
  }, [location, editMode]);

  return (
    <Box data-automation-id="button-fast-adding-close" onClick={editMode} sx={{ cursor: 'pointer' }}>
      <CloseIcon />
    </Box>
  );
}

2. 页面刷新/关闭 #

通过监听浏览器的beforeunload事件，在页面刷新或关闭前执行函数：

import { useEffect, useCallback } from 'react';

function YourComponent() {
  const editMode = useCallback(() => {
    // 关闭编辑模式逻辑
    console.log('执行关闭编辑模式');
  }, [/* 依赖项 */]);

  useEffect(() => {
    const handleUnload = () => {
      editMode();
    };

    window.addEventListener('beforeunload', handleUnload);
    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      window.removeEventListener('beforeunload', handleUnload);
    };
  }, [editMode]);

  return (
    <Box data-automation-id="button-fast-adding-close" onClick={editMode} sx={{ cursor: 'pointer' }}>
      <CloseIcon />
    </Box>
  );
}

注意事项 #

• 如果editMode包含异步操作（比如接口请求），beforeunload事件中可能无法完整执行，建议用navigator.sendBeacon发送异步数据，它能在页面卸载时保证请求完成：

  const editMode = useCallback(() => {
    // 同步逻辑先执行
    // 异步数据上报用sendBeacon
    navigator.sendBeacon('/api/save-edit-state', JSON.stringify({ state: 'closed' }));
  }, []);
  

• 务必用useCallback包裹editMode，避免因函数引用变化导致监听重复绑定/解绑。

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