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

Question

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

Answer 1

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

1. 单击任何链接切换到不同的组件时
2. 刷新组件

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

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

因此，每当用户输入内容时，您都可以根据此值将此值设置为 true，如果用户单击刷新，您可以检查并执行它

您可以查看更多的在这里和这

所以你可以在父级别持有一个状态变量，并基于此你可以触发它

Answer 2

你可以使用 Promise struct 并运行你的刷新其他任何你想要的

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

当你调用这个函数时

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