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

2024-06-02 • 问答

我们的应用程序是使用react开发的，并在刷新和路线导航时进行开发，我们需要检查页面中是否有未保存的更改并显示警报。在这种情况下，我们可以在页面导航中利用route API，但直接刷新页面似乎无效。

因此，在您的情况下，基本上用户输入的是长格式，因此在以下情况下，您需要向他显示未保存的更改将丢失的消息。

因此，为了执行这些操作，存在一个名为 beforeunload 的本地事件，因此您需要通过使用componentDidMount中的document.addEventListener将事件添加到文档中，然后可以将其卸载到componentWillUnmount中父组件

所以应该检查一下表单是否脏了，这意味着用户键入了某些内容，例如redux形式的isDirty。

因此，每当用户键入内容时，如果用户单击刷新，就可以根据此值将该值设为true

您可以在here和this上查看更多信息

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

如果需要，您可以使用Promise结构并运行其他刷新操作

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

当您将此函数称为

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