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

Question

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

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 函数，还创建了一个无限循环。

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}`);
       
    }

据我了解，唯一应该进入依赖关系数组的是将要更改的内容。我认为我的依赖数组应该是空的，因为我不想改变任何东西。除非添加新员工，否则每次都会返回相同的数据。我不确定如何解决此问题以使警告消息消失。我看到有一种方法可以禁用警告，但我不确定是否应该这样做。

Answer 1

由于 source 对象在每次渲染中都会发生变化，因此无限循环中的效果运行s。将它移动到效果中。并将 fetchData 函数也移动到 effect 中，因为它需要访问 source.

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

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

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

  fetchData()

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

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

Answer 2

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

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

   fetchData();

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

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

How do I properly set up my useEffect so I don't receive a missing dependency warning?

dependencies

reactjs

react-hooks