如何正确设置我的 useEffect，以免收到缺少依赖项警告？

Question

我收到此警告“React Hook React.useEffect 缺少依赖项：'fetchData' 和'source'。包括它们或删除依赖项数组 react-hooks/exhaustive-deps”。 这是我的 function：

function EmployeesPage(props: any) {

    const companyId = props.match.params.id;

    const source = axios.CancelToken.source();

    const fetchData = async () => {
        try {
            const response = await axios.get<IEmployees[]>(`${process.env.PUBLIC_URL}/api/company/${companyId}/employees`, {
                cancelToken: source.token
            });
            setEmployees(response.data);
            setLoading(true);
        } catch (error) {
            if (axios.isCancel(error)) {

            } else {
                throw error;
            }

        }
    }

    const deleteEmployee = async (EmployeeId: any) => {

        const response = await axios.delete(`${process.env.PUBLIC_URL}/api/company/${companyId}/employees/${employeeId}`);
        if (response) await fetchData();   
    }

    React.useEffect(() => {
        fetchData()
        return () => {
            source.cancel();
        };

    }, [])

我试图通过将 fetchData 放入 useEffect 并将 deleteEmployee 移出来解决此问题，但这会导致我的端点在无限循环中被调用。 然后我尝试了 useCallback function 并且还创建了一个无限循环。

const fetchData = useCallback(async () => {
        try {
            const response = await axios.get<IEmployees[]>(`${process.env.PUBLIC_URL}/api/company/${companyId}/employees`, {
                cancelToken: source.token
            });
            setEmployees(response.data);
            setLoading(true);
        } catch (error) {
            if (axios.isCancel(error)) {

            } else {
                throw error;
            }

        }
    }, [source, CompanyId]);
    
    React.useEffect(() => {
        fetchData()
        return () => {
            source.cancel();
        };

    }, [fetchData, source])

    const deleteEmployee = async (EmployeeId: any) => {

       
        await axios.delete(`${process.env.PUBLIC_URL}/api/company/${companyId}/employees/${employeeId}`);
       
    }

我的理解是，依赖数组中唯一应该发生的事情就是会发生变化的事情。 我认为我的依赖数组应该是空的，因为我不想改变任何东西。 除非添加新员工，否则每次都将返回相同的数据。 我不确定如何解决此问题以将警告消息发送给 go。 我已经看到有一种方法可以禁用警告，但我不确定我应该这样做。

Answer 1

效果在无限循环中运行，因为source object 在每次渲染中都会发生变化。 将其移动到效果内。 并将fetchData function 也移动到效果内，因为它需要访问source 。

您应该将companyId添加到依赖项数组中，以确保在companyId更改时重新获取数据。 setEmployees和setLoading引用不会改变，因此添加它们是安全的——它们不会导致效果重新运行。

React.useEffect(() => {
  const source = axios.CancelToken.source()

  const fetchData = async () => {
    //...
  }

  fetchData()

  return () => {
    source.cancel()
  }
}, [companyId, setEmployees, setLoading])

我建议阅读本文以了解从依赖项数组中省略函数是否安全。

Answer 2

您可以在useEffect中声明fetchData和source ，因为它不使用除了setState函数之外的任何东西。 这样， fetchData不会在每次重新渲染时一遍又一遍地声明。

useEffect(() => {
   const source = axios.CancelToken.source();
   const fetchData = async () => {
      ...
   };

   fetchData();

   return () => {
      source.cancel();
   };
}, [setEmployee, setLoading]);