反应 useEffect 和 setInterval

Question

我正在制作一个 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数据调用块直接放在useEffect中，页面不会加载第一个 time/or 页面时显示数据已刷新，我必须等待一分钟。

我找到了几个关于这个问题的参考资料，例如 here 和 here 但我无法理解，因为我才刚刚开始使用 React 一个月前。

感谢对此的任何帮助！

Answer 1

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

你可以直接把getApiData放在useEffect里面使用...
您可以使用 useCallBack，useEffect 会重新渲染并产生 mempry leeek 问题，因为每次反应渲染 Dashboard 都会重新创建 getAPIData，您可以通过使用 useCallBack 来防止这种情况，并且你必须确保依赖性，只需要放置你需要的东西......例如：

反应 useEffect 和 setInterval

React useEffect and setInterval

reactjs

setinterval

use-effect