我如何正确设置我的useEffect，这样我就不会收到一个缺失的依赖警告?

Question

我收到这个警告"React Hook React。useEffect缺少依赖项:'fetchData'和'source'。要么包含它们，要么删除依赖数组react-hooks/精疲力竭-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对象在每次渲染中都会发生变化。将其移动到效果中。并将fetchData函数也移动到效果中，因为它需要访问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]);