使用React中的Context API时,是否可以每隔几秒钟设置一次自动刷新间隔? getData()函数在API上运行axios.get(),但是当我尝试在useEffect挂钩的return函数中尝试setInterval()和cleanup时,它不会清理间隔。 getData()将当前和加载变量设置为应用程序级别状态。
我只是想每隔几秒钟刷新并重新执行一次API调用。我尝试了useRef()挂钩,但仍能正常工作,但useEffect仍无法在完成间隔后清除间隔。
我想在组件的返回函数中访问当前属性,并在每次运行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 });
};
我有类似的问题,我曾经在这里描述解决方案: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,间隔将停止运行。