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

Question

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

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

我究竟做错了什么？

Answer 1

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

检查出的第二个参数useEffect的文档，以更多地了解它。

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

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