Javascript 下一个Js Router beforePopState,处理程序中组件的访问状态
我正在使用Next js Router.beforePopState事件,我想访问我在定义此处理程序的react组件中创建的useState变量的值,下面的示例代码,但每当我访问状态时,它是空的或设置为默认值,例如在下面的代码goaway状态值中,我总是以空字符串“”的形式在处理程序中获取状态值,即使我在代码中设置了不同的值,是否有方法可以在处理程序中获取状态值Javascript 下一个Js Router beforePopState,处理程序中组件的访问状态,javascript,reactjs,next.js,Javascript,Reactjs,Next.js,我正在使用Next js Router.beforePopState事件,我想访问我在定义此处理程序的react组件中创建的useState变量的值,下面的示例代码,但每当我访问状态时,它是空的或设置为默认值,例如在下面的代码goaway状态值中,我总是以空字符串“”的形式在处理程序中获取状态值,即使我在代码中设置了不同的值,是否有方法可以在处理程序中获取状态值 const [goAway, setGoAway] = useState(""); const browserTabcloseH
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;
});
};
}, []);
我能够找到相同的解决方案,但我缺少的是在useffect下面添加属性,代码修复了这个问题-
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