React：在网站退出时执行功能，而不发出警报警告答案

【问题标题】：React: Execute function on website exit, without giving an alert warningReact：在网站退出时执行功能，而不发出警报警告
【发布时间】：2021-06-17 03:32:08
【问题描述】：

我有一个钩子，当有人离开当前页面或离开网站时执行传递给它的函数

const useOnPageLeave = (handler) => {
    useEffect(() => {

        window.onbeforeunload = undefined;
        window.addEventListener('beforeunload', (event) => {             //When they leave the site
            event.preventDefault();                                     // Cancel the event as stated by the standard.
            handler();
        });

        return () => {
            handler();                                                 //When they visit another local link
            document.removeEventListener('beforeunload', handler);
        };
    }, []);
};

当使用 Firefox 或 Safari 时，会出现此警告消息（仅当他们离开网站时，而不是当他们访问本地链接时），我不希望显示此警告消息

如果我删除event.preventDefault()这一行，那么handler函数就不会被执行，我需要handler事件被执行

Here is an MRE of the problem

【问题讨论】：

你在使用 React-router 进行本地页面导航吗？
@ShubhamKhatri 是的，这发生在页面离开时

标签： reactjs react-hooks addeventlistener use-effect onbeforeunload

【解决方案1】：

const useOnPageLeave = (handler) => {
  useEffect(() => {
    window.onbeforeunload = () => handler();

    window.addEventListener('beforeunload', (event) => {
      handler();
    });

    return () => {
      handler();
      document.removeEventListener('beforeunload', handler);
    };
  });
};

【讨论】：

我认为这不能解决任何问题
你试过了吗？
我确实试过了，我要尝试发布一个github mre
我发布了MRE。这个问题在chrome或edge中不会发生，所以应该在firefox或safari中测试一下
我不确定，但我记得在 Firefox 中您应该使用 event.returnValue = null; 我将删除答案，因为它没有解决您的问题。

【解决方案2】：

在 useEffect 中使用侦听器可能会出现问题。

const useOnPageLeave = (handler) => {   

    useEffect(() => {
        
    }, []); // useEffect will only get called once on component did mount 
};

因此，您可能需要考虑尝试将您的逻辑置于 useEffect 之外

或

添加一个 useState 钩子作为侦听器可能是可行的方法

const useOnPageLeave = (handler) => {

    const [userLeaving, setUserLeaving] = useState(false);        

    useEffect(() => {

       if (userLeaving) handler();
    
    }, [userLeaving]); // useEffect will only get called once on component did mount AND each time userLeaving state updates
};

【讨论】：

"// useEffect 只会在组件确实挂载时被调用一次“在这种情况下并不完全正确。 Scroll down to "Why did we return a function from our effect?"。并且代码有效，但是离开时的警告框很烦人
哦，我明白了。我的代码 useEffect 只会在组件确实挂载时被调用，因为我添加了一个空的依赖项列表 []。如果没有该依赖项列表，我不需要使用 useEffect，但看起来您正在使用它，例如示例，因此您比我领先几步。很抱歉无法提供帮助:(

【解决方案3】：

看起来firefox 和safari 浏览器默认显示此消息。您对此无能为力。但有一个好消息。他们似乎只针对beforeunload 事件而不是unload。所以你可以尝试使用它。

这里有更多信息：https://support.mozilla.org/en-US/questions/1304313

【讨论】：

【解决方案4】：

您可以简单地处理window 上的unload 事件。例如，以下代码在页面关闭时执行 HTTP 请求：

window.addEventListener('unload', function (event) {
  (async () => {
    const response = await fetch('/my-endpoint')
    console.log(response)
  })()
})

但请注意，不鼓励使用 unload 事件。有关详细信息，请参阅MDN docs（TL；DR：它不可靠，尤其是在移动设备上）。

【讨论】：