我们如何在使用 react 刷新页面之前调用函数

Question

我们的应用程序是使用 react 开发的，在刷新和路由导航中，我们需要检查页面中未保存的更改并显示警报。 对于此方案，我们能够在页面导航上利用路由 API， 然而，直接刷新页面似乎不起作用。

Answer 1

因此，在您的情况下，基本上用户键入了一个长表单，因此在以下情况下，您需要向他显示未保存的更改将丢失的消息。

1. 切换到其他组件时，单击任何链接
2. 刷新组件

因此，为了执行这些操作，有一个本机事件称为beforeunload，因此您需要使用 componentDidMount 中的 document.addEventListener 将事件添加到文档中，并且可以在父组件中的 componentWillUnmount 中卸载该事件

所以应该检查一下表单是否脏了，这意味着用户已经输入了一些东西，比如 redux-form 中的 isDirty 。

因此，每当用户键入内容时，只要用户单击刷新，您就可以根据此值将此值设置为 true，您可以进行检查并执行它

你可以在这里和这个查看更多

因此，您可以在父级别保存状态变量，并在此基础上触发它

Answer 2

您可以使用 Promise 结构并根据需要运行其他刷新

export const unSavedChanges= (values,listTitle)=>    new Promise((resolve, reject) => {
//Your code of check, validation what ever
})

当你调用这个函数时

unSavedChanges(changes,"list").then(response=>{
refresh.page
}
)