如何使用React每5分钟调用一次API

Question

我尝试每5分钟调用一次API，但setInterval的限制不允许这样做。

useEffect(() => {
setInterval(() => {
(() => {
const API_KEY = "C5EQJXXXXXXXXXXXX";
const name = "FB";
axios
.get(
`https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=${name}&interval=5min&apikey=${API_KEY}`
)
.then(({ data }) => {
console.log(data);
console.log(data["Time Series (5min)"]);
for (let key in data["Time Series (5min)"]) {
setStocksX((prev) => [...prev, key]);
setStocksY((prev) => [
...prev,
data["Time Series (5min)"][key]["1. open"]
]);
}
//console.log(stocksX, stocksY);
});
})();
}, 30000);
});

任何建议都将不胜感激！感谢

Answer 1

您可以在第一次渲染的useEffect挂钩中添加时间为60*5*1000的setInterval。在卸载组件时需要清除setInterval之后。

const ref = useRef(null)
useEffect(() => {
ref.current = setInterval(yourFunction, 5 * 60 * 1000);
return () => {
if(ref.current){
clearInterval(ref.current)
}
}
}, [])

Answer 2

我写了这个实用程序挂钩，我一直在React应用程序中使用：

import React from 'react';
type IntervalCallback = () => void;
function useDispatch(callback: IntervalCallback, delay: number): void {
const cachedCallback = React.useRef<IntervalCallback>();
React.useEffect(() => {
cachedCallback.current = callback;
}, [callback]);
React.useEffect(() => {
if (delay !== 0) {
const id = setInterval(() => cachedCallback?.current?.(), delay);
return () => clearInterval(id);
}
}, [delay]);
}
export const IntervalHooks = {
useDispatch,
};

然后我可以这样使用它：

IntervalHooks.useDispatch(() => { console.log("hello"); }, 300000);

这给了我很大的灵活性，因为如果需要，我可以动态更新间隔，并在组件卸载时负责清理。

Answer 3

我假设你的钩子每0.5秒声明一个新的setInterval，可能会让你的React应用程序停止以避免内存泄漏，你只需要声明一个setInterval，这意味着useEffect的第二个参数应该有空的方括号

useEffect(() => {
setInterval(yourFunction, 300000); // The function will be called
},[]);                               // every 5 minutes