javascript 在useEffect中设置停止setInterval函数

wkftcu5l 于 2023-03-21 发布在 Java

关注(0)|答案(2)|浏览(153)

我有这个简单的useEffect代码。当用户每2分钟登录应用程序时，我将调度一个API调用的action，并且一旦用户注销，我需要停止此间隔。尽管如此，当前代码甚至在用户注销后运行，当用户注销时，我应该做些什么来防止此间隔。
我使用localStorage中的值来确定用户是否已登录。

const intervalId = useRef(null)
    useEffect(() => {
    const isLoggedIn = localStorage.getItem("isUserLoggedIn")  //(true or false)
    intervalId.current = setInterval(() => {
    dispatch(refreshUserToken());
    if(isLoggedIn === false){
    clearInterval(intervalId.current)
    }
    },1000*60*2)

return () => {
clearInterval(intervalId.current)
}
    },[])

有什么方法可以解决我的问题吗？任何帮助都将不胜感激！！

JavaScript

来源：https://stackoverflow.com/questions/72519616/stop-setinterval-function-set-inside-useeffect

2条答案

按热度按时间

q7solyqu1#

如果你想要更新的值，你应该在interval中添加从localStorage获取值的那一行。另外，localStorage会给你一个字符串而不是布尔值，你可以解析它，或者改变你的if语句。试试这个：

const intervalId = useRef(null);
useEffect(() => {
  intervalId.current = setInterval(() => {
    const isLoggedIn = localStorage.getItem("isUserLoggedIn"); //(true or false)
    if (isLoggedIn === "false") {
      clearInterval(intervalId.current);
      return;
    }
    dispatch(refreshUserToken());
  }, 1000 * 60 * 2);

  return () => {
    clearInterval(intervalId.current);
  };
}, []);

您可以使用事件来代替setInterval。例如，将设置localStorage的代码更改为：

localStorage.setItem("isUserLoggedIn", true); // or false depending on the context
window.dispatchEvent(new Event("storage")); // you notice that there is a change

将useEffect更改为：

useEffect(()=>{
    const listenStorageChange = () => {
       const isLoggedIn = localStorage.getItem("isUserLoggedIn");
       console.log(isLoggedIn);
       // do your logic here
    };
    window.addEventListener("storage", listenStorageChange);
    return () => window.removeEventListener("storage", listenStorageChange);
},[])

赞(0）回复(0）举报 2023-03-21

guykilcj2#

使用localStorage存储的键和值始终采用UTF-16字符串格式。与对象一样，整数键和布尔值会自动转换为字符串。
所以你要这样打电话：

if(isLoggedIn === 'false'){
    clearInterval(intervalId.current)
}

检查documentation。

赞(0）回复(0）举报 2023-03-21

我来回答

javascript 在useEffect中设置停止setInterval函数

2条答案

相关问题

热门标签

最新问答