使用Context API和React Hooks每隔几秒钟执行一次API调用

Question

使用React中的上下文API时，是否可以每隔几秒钟设置一次自动刷新间隔？getData（）函数在API上运行axios.get（），但当我在useEffect钩子的返回函数中尝试setInterval（）和cleanup时，它仍然不会清理间隔。getData（）将当前变量和加载变量设置为应用程序级状态。

我只是想每隔几秒钟刷新并重新执行API调用。我尝试使用useRef（）钩子，并使它开始工作，但一旦完成，useffect仍然无法清除间隔。

我想访问组件返回函数中的当前属性，并在每次运行API调用时显示一些数据。

代码如下：

const { loading, current, getData } = appContext;
  useEffect(() => {
    const interval = setInterval(() => {
      getData();
      console.log('updated');
    }, 1000);

    return () => clearInterval(interval);
  }, []); // eslint-disable-line // also tried without the []

getData（）代码：

const getData = async () => {
    setLoading();

    const res = await axios.get(process.env.REACT_APP_APIT);

    dispatch({ type: GET_CURRENT, payload: res.data });
  };

Answer 1

我有一个类似的问题，我使用这里描述的解决方案：https://overreacted.io/making-setinterval-declarative-with-react-hooks/

下面是一个简单的例子：

import React, { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

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

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

function App() {
  const [intervalTime, setIntervalTime] = useState(2000);

  useInterval(() => {
    // Do some API call here
    setTimeout(() => {
      console.log('API call');
    }, 500);
  }, intervalTime);

  return (
    <div className="App">
      <button onClick={() => setIntervalTime(2000)}>Set interval to 2 seconds</button>
      <button onClick={() => setIntervalTime(null)}>Stop interval</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

使用状态变量intervalTime可以控制间隔时间。通过将其设置为null，间隔将停止运行。