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

Question

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

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

我做错了什么？

Answer 1

如果您没有为 useEffect Hook 提供任何依赖项，它将在每次组件渲染时执行(这会无限发生，因为您在获取数据后设置状态，从而导致组件重新渲染)。

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

空的依赖项数组表示 useEffect 将充当挂载并且仅执行一次。

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