Javascript 窗口/选项卡关闭前的React调用函数

当用户关闭窗口上的选项卡时，我试图调用一个函数。根据我的研究，我发现使用窗口的beforeunlaod事件可以实现同样的效果：

componentDidMount(){
  window.addEventListener('beforeunload', (ev) => {
    this.props.apiCall(); // calling an api to update some data
 })
}

上面的代码似乎工作不正常，因为没有调用相应的函数（apiCall（））

有人能帮我解决这个问题吗。

根据，您的EventListener应该是这样的

window.addEventListener('beforeunload', (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';

  this.props.apiCall();
});

---

或者，如果您只是想完成一些事情，而不想知道实现细节，您也可以简单地使用这个包。您还必须使用卸载事件。这里有一个关于类型脚本和功能组件的有效解决方案：谢谢你的回答@ravibagul91。尽管我之前已经试过了。它部分起作用。i、 e.关闭选项卡后，将显示一个确认对话框（窗口的默认对话框），指示用户是否要离开站点。当用户单击cancel选项时，就会调用函数get，这是不应该发生的。一旦用户确认并单击“离开”选项/按钮，该函数应被调用。我将使用此答案+一个

unload

event listenner（），它将触发您的函数，而不是

beforeunload

。正如@LLucas所述，也使用unload事件。下面是一个针对Typescript和功能组件的工作解决方案：没有警报框，有没有办法做到这一点？我注意到删除'event.returnValue=''；时阻止chrome上的框，但不阻止firefox上的框