gpt4 book ai didi

reactjs - React useEffect 和 setInterval

转载 作者:行者123 更新时间:2023-12-03 08:22:30 25 4
gpt4 key购买 nike

我正在制作一个 React 仪表板,每分钟都会调用 API 进行更新。根据SO中的许多答案,我现在有这样的作品:

const Dashboard = (props) => {
const [stockData, setStockData] = useState([]);

useEffect(() => {
//running the api call on first render/refresh
getAPIData();
//running the api call every one minute
const interval = setInterval(() => {
getAPIData()
}, 60000);
return () => clearInterval(interval);
}, []);

//the api data call
const getAPIData = async () => {
try {
const stdata = await DataService.getStockData();
setStockData(stdata);
}
catch (err) {
console.log(err);
}
};

但是我不断收到浏览器警告

React Hook useEffect has a missing dependency: 'getAPIData'. Either include it or remove the dependency array

这是否值得关注(例如导致内存泄漏)?

我尝试修复它:

  • 不使用useEffect似乎不太可能(直接使用setInterval)
  • 如果我删除依赖项或将 stockData 作为 useEffect 的依赖项,我会看到每秒都会进行 API 调用,所以我认为那不是对。
  • 如果我将api数据调用 block 直接放在useEffect中,页面不会第一次加载时显示数据/或刷新页面,我必须等待一分钟。

我找到了一些关于这个问题的引用资料,例如 herehere但鉴于我才开始使用 React,我无法理解它一个月前。

感谢对此的任何帮助!

最佳答案

您可以通过多种方式解决此问题:

  1. 您可以直接将 getApiData 放入 useEffect 中并使用它... enter image description here

  2. 您可以使用useCallBack,useEffect会重新渲染并产生mempry leeek问题,因为每次react渲染Dashboard都会重新创建getAPIData,您可以通过使用useCallBack来防止这种情况,并且您必须确保关于依赖关系,只需放置您需要的内容...例如: enter image description here

关于reactjs - React useEffect 和 setInterval,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67463964/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com