卸载前的事件侦听器在反应中不起作用

Question

我试图在用户关闭选项卡时使用以下代码打开一个弹出窗口：

useEffect(() => {
    
    window.addEventListener('beforeunload',handleUnload );
    return () => {
      window.removeEventListener('beforeunload', handleUnload);
    }
  }, []);
  

  const handleUnload = (e) => {
    e.preventDefault();
   console.log('hey')
   alert("HEY");
  }

有没有其他方法可以做到这一点，或者有什么方法可以纠正代码。目前我正在尝试提醒用户。

Answer 1

欢迎来到SO！

我认为您无意中使用{}.

尝试这个：

useEffect(() => {
  window.addEventListener("beforeunload", handleUnload);

  return () => window.removeEventListener("beforeunload", handleUnload);
}, [handleUnload]);

我已添加[handleUnload]到 useEffect 的第二个属性，以防止它在每次状态更改时添加和删除事件侦听器。