反应 useEffect 和 setInterval

Posted 2023-03-17

【中文标题】反应 useEffect 和 setInterval

【英文标题】：React useEffect and setInterval

【发布时间】：2021-07-31 11:23:44

【问题描述】：

我正在制作一个 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中，页面不会 在第一次加载/或刷新页面时显示数据，我必须等待 一分钟。

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

感谢任何帮助！

【问题讨论】：

需要在useEffect函数的[]中包含getAPIData

@AhmedAlhameli 我把它放在下面每个 Anees Hikmat Abu Hmiad 答案的 UseCallback 中，它似乎解决了这个问题。谢谢！

【参考方案1】：

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

你可以直接把getApiData放到useEffect里面使用...

你可以使用useCallBack，useEffect是去re-render和make mempry leeek issue，因为每次react render Dashboard它都会重新创建getAPIData，你可以使用useCallBack来防止这种情况，你必须确保依赖，只是你需要把你需要的东西......例如：

【讨论】：

我尝试了这两种方法，它们都有效！我会按照你的建议坚持第二个。干杯！

请注意要点很清楚，两种解决方案都很好，请注意您要在组件中声明的任何函数都必须是 useCallBack 以改进它并防止重新渲染问题任何需要用作依赖项的地方...