我正在使用Next js Router.beforePopState事件,我想访问在其中定义了该处理程序的react组件中创建的useState变量的值,下面是示例代码,但是每当我访问该状态时,它为空或设置为默认值,例如下面的代码 goaway 状态值,即使我在代码中设置了其他值,我也总是以空字符串“”的形式进入处理程序,有没有办法在处理程序中获取状态值?
hasOwnProperty
答案 0 :(得分:0)
我能够找到与我所缺少的解决方案相同的解决方案,即在useEffect中添加属性,以下代码修复了该问题-
const [goAway, setGoAway] = useState("");
const browserTabcloseHandler = e => {
e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown
// Chrome requires returnValue to be set
e.returnValue = "";
};
useEffect(() => {
if (window) {
Router.beforePopState(() => {
//if (componentShouldBeSavedAsDraft(componentData)) {
const result = window.confirm("are you sure you want to leave?");
if (!result) {
window.history.pushState("/", "");
Router.push("/marketplace/upload-component");
}
console.log(goAway); // this value is always "" even though set differently in code.
return result;
});
window.onbeforeunload = browserTabcloseHandler;
}
//Router.events.on("routeChangeStart", handleRouteChange);
return () => {
if (window) {
window.onbeforeunload = null;
}
Router.beforePopState(() => {
return true;
});
};
}, [goAway]); // this fixed the issue