尝试使用ref：

const useUnload = (fn) => {
  const cb = React.useRef(fn);

  React.useEffect(() => {
    const onUnload = cb.current;
    window.addEventListener('beforeunload', onUnload);
    return () => {
      window.removeEventListener('beforeunload', onUnload);
    };
  }, [cb]);
};

然后用这个打电话

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

欢迎来到SO！
我认为你无意中使用了{}破坏了你的函数。
试试这个：

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

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

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

我知道这不是OP所问问题的确切答案，但我在试图弄清楚如何仅在用户有未保存的更改时才提示时遇到了这个问题。最后，我用下面的代码实现了这个逻辑：

<pre>
    let [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false);

    const [unsavedChangesCallback, setUnsavedChangesCallback] = React.useState(() => (e) => {
        let message = "You have unsaved changes, are you sure you want to leave?";
        e.returnValue = message;
        return message;
    });

    useEffect(() => {
        if (hasUnsavedChanges) {
            window.addEventListener('beforeunload', unsavedChangesCallback);
        } else {
            window.removeEventListener('beforeunload', unsavedChangesCallback);
        }
    }, [hasUnsavedChanges, unsavedChangesCallback]);
</pre>

然后，您所要做的就是更新hasUnsavedChanges的值，无论您的应用程序当前是否有未保存的更改，它都会相应地提示。