如何在 reactjs 中每 5 分钟发送一次动作

Question

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

这是我的代码，我在我的 app.js 中定义了这个 keepAlive 函数，我将整个应用程序包装到 redux store 中。这是isAuthenticated布尔函数。如果isAuthenticated是 true 并且只有在我想派遣行动时才API.getAcessToken可用。localstorage

  function keepAlive() {

    if (

      props.isAuthenticated === true &&

      API.getAccessTokenFromLocalStorage()

    ) {

      setInterval(() => {

        props.keepTokenAlive();

      }, 100000); // 1000ms =1sec

    } else {

      return null;

    }

  }

  keepAlive();

Answer 1

您可以创建自定义 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}

Answer 2

你能做这个吗？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();