如果添加了功能依赖关系，则 React useEffect re Renders Infinitely

Posted 2023-02-19

【中文标题】如果添加了功能依赖关系，则 React useEffect re Renders Infinitely

【英文标题】：React useEffect reRenders Infinitely if functional dependencyies are added

【发布时间】：2020-12-17 07:31:51

【问题描述】：

我正在使用 react useEffect 挂钩从后端获取数据。 而且我正在使用两个功能（道具解构）

createError(如果有错误) setisLoading（在获取数据时加载微调器） 代码是：

useEffect(() => 
    const fetchCourses = async () => 
      setisLoading(true);

      try 
        const response = await fetch(
          `$localurlapi/course/getEnglishCourses`,
          
            method: "GET",
            headers: 
              "Content-Type": "application/json",
            ,
          
        );

        const responseData = await response.json();
        setLoadCourses(responseData.courses);
        setisLoading(false);
        // console.log(responseData.courses);
       catch (err) 
        setisLoading(false);
        createError("Something Went Wrong");
      
    ;

    fetchCourses();   , []);

ESLint 提示“createError”和“setisLoading”缺少依赖。

如果我添加这些 useEffect 无限运行，因为 setisloading 每次都会重新启动 useEffect 调用。

如何阻止这种情况发生？？

【参考方案1】：

如果您知道自己在做什么并且只是想抑制警告，您可以在您的部门之前添加 // eslint-disable-next-line react-hooks/exhaustive-deps 以仅在第一次渲染时运行效果。