我正在使用 Next js Router.beforePopState 事件,我想访问我在定义此处理程序的 react 组件中创建的 useState 变量的值,示例代码如下,但每当我访问状态时,它为空或设置为默认值下面代码中的示例 离开即使我在代码中设置了不同的值,我总是在处理程序中以空字符串“”的形式获取状态值,有没有办法可以在处理程序中获取状态值?
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;
});
};
}, []);
最佳答案
我能够找到相同的解决方案,我缺少的是在 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
关于javascript - Next Js Router beforePopState ,在 handler 中访问组件的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60701587/