React / Axios 发送无限数量的请求

Posted 2023-02-22

【中文标题】React / Axios 发送无限数量的请求

【英文标题】：React / Axios send infinite number of requests

【发布时间】：2020-04-05 15:12:59

【问题描述】：

我在组件挂载时从我的后端 api 获取数据并且可以成功完成，但是我的 React 应用程序不断向服务器发送请求，导致它变慢。我使用了 useEffect 钩子，但不使用钩子我得到了相同的结果。

useEffect(() => 
   axios.get('http://127.0.0.1:8000/food_category/')
  .then(response => 
   setFoodCategory(response.data);
   console.log(response.data);
));

我做错了什么？

【问题讨论】：

每次使用 setFoodCategory 时，组件都会再次挂载并执行 useEffect。试试 useEffect( () => ... , [])。最后的空数组参数只会执行一次useEffect。

【参考方案1】：

如果你不给useEffect钩子提供依赖，它会在你的组件每次渲染时执行（这将无限发生，因为你在获取数据后设置了状态，因此你的组件会重新渲染）。

查看docs 中useEffect 的第二个参数以了解更多信息。

一个空的依赖数组表示useEffect 将作为一个挂载并且只执行一次。

useEffect(() => 
    // Do mount stuff here such as executing your request.
, []);

【讨论】：

那我怎么看其他道具呢？所以我可以再次执行它？