Reactjs 使用上下文API和React钩子每隔几秒钟进行一次API调用

使用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（）代码：

---

我有一个类似的问题，我使用这里描述的解决方案：

下面是一个简单的例子：

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);

import React，{useffect，useRef，useState}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
const useInterval=（回调，延迟）=>{
const savedCallback=useRef（）；
//记住最近的回拨。
useffect（（）=>{
savedCallback.current=回调；
}，[callback]）；
//设置间歇时间。
useffect（（）=>{
函数tick（）{
savedCallback.current（）；
}
如果（延迟！==null）{
让id=设置间隔（滴答声，延迟）；
return（）=>clearInterval（id）；
}
}，[延迟]；
}
函数App（）{
const[intervalTime，setIntervalTime]=useState（2000）；
useInterval（（）=>{
//在这里执行一些API调用
设置超时（（）=>{
log（“API调用”）；
}, 500);
}，休息时间）；
返回(
setIntervalTime（2000）}>将间隔设置为2秒
setIntervalTime（null）}>停止间隔
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

---

使用状态变量

intervalTime

可以控制间隔时间。通过将其设置为null，间隔将停止运行。

您发布了一个代码示例，其中效果返回

未定义

，而不是清除函数。如果您试图清除间隔，它肯定会更有用。@LeopoldsaysRestatemonica粘贴了错误的代码段，更新了原始的post.FYI，您应该能够毫无问题地在依赖项数组中传递

getData

，除非该函数正在更改？@Nick我试图将getData传递到依赖项数组中，但它仍然没有清除清理的间隔。用getData函数代码更新了代码。@dynamitem我不认为它能解决您的问题，但我想指出的是，您可能不需要使用禁用lint的代码。您已经看过那篇特定的文章，似乎对我没有帮助。@dynamitem您想定期触发API调用并显示数据，对吗？使用自定义useInterval钩子而不是使用useEffect和setInterval来减少样板文件。尝试使用useInterval自定义钩子，我同意它可以减少样板文件代码，但仍然不能正确取消我的间隔，并继续运行。@DynamicItem您可以做一些较小的调整来添加功能以再次删除间隔。例如，您可以定义-1作为停止间隔的值。@dynamitem我用一个更好的例子更新了我的答案。但我仍然不能100%确定你在找什么。

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);