Javascript 下一个Js Router beforePopState,处理程序中组件的访问状态

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

我正在使用Next js Router.beforePopState事件,我想访问我在定义此处理程序的react组件中创建的useState变量的值,下面的示例代码,但每当我访问状态时,它是空的或设置为默认值,例如在下面的代码goaway状态值中,我总是以空字符串“”的形式在处理程序中获取状态值,即使我在代码中设置了不同的值,是否有方法可以在处理程序中获取状态值

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