我如何在ReactJS中每隔5分钟调度一次动作

如何解决我如何在ReactJS中每隔5分钟调度一次动作

我尝试每5分钟发送一次操作。一旦用户登录，它必须调度动作。它将每隔5分钟开始调度动作。我尝试使用setInterval，但是这里的问题是，即使我注销，它仍会继续执行调度操作。

这是我的代码我已经在我的app.js中定义了这个keepAlive函数，在那里我将整个应用程序包装到了redux存储中。这是isAuthenticated是布尔函数。如果isAuthenticated为真，并且API.getAcesstoken中只有localstorage可用，那么我想调度操作。

  function keepAlive() {
    if (
      props.isAuthenticated === true &&
      API.getAccesstokenFromLocalStorage()
    ) {
      setInterval(() => {
        props.keepTokenAlive();
      },100000); // 1000ms =1sec
    } else {
      return null;
    }
  }
  keepAlive();

解决方法

你能做到吗？

let to = null;

function keepAlive() {
    //Assign a reference to clear the interval
    to = setInterval(() => {
        if (
           props.isAuthenticated === true &&
           API.getAccessTokenFromLocalStorage()
        ) {
             props.keepTokenAlive();
        } else {
            // If not passing the condition,clear the interval
            clearInterval(to);
        }            
    },100000); // 1000ms =1sec
}

 keepAlive();

您可以创建一个自定义的React钩子。有一些库可以解决这个问题，但是所涉及的代码很小，您可以自己完成。

例如，这是use-interval NPM软件包中的源代码：

import { useEffect,useRef } from 'react';

const useInterval = (callback,delay) => {
  const savedCallback = useRef();

  useEffect(
    () => {
      savedCallback.current = callback;
    },[callback]
  );

  useEffect(
    () => {
      const handler = (...args) => savedCallback.current(...args);

      if (delay !== null) {
        const id = setInterval(handler,delay);
        return () => clearInterval(id);
      }
    },[delay]
  );
};

export default useInterval;

您将这样使用它：

const MyComponent = () => {
  useInterval(() => {
    // your code here
  },5000);

  return null
}