React Hook Warnings for async function in useEffect

Question

const fetchAPIDataCountries = async () => {
try {
const response = await 
axios.get('https://covid19.mathdro.id/api/countries');
const { data } = response
const { countries } = data
const newData = _.map(countries, item => ({ name: item.name }))
console.log("fetchCountries -> newData", countries)
return newData
} catch (error) {
return error;
}
}
useEffect(() => {
const fetchAPI = async () => {
let dataCountries = await fetchAPIDataCountries();
setCountries(dataCountries)`enter code here`;
};
return () => fetchAPI();
}, []);

我没有从 API 获取数据但我尝试删除return()useEffect()刚刚写了fetchAPI()，没关系。我不知道这里发生了什么，谁能解释一下。谢谢。

Answer 1

返回值是useEffect中的一个函数，旨在成为一个清理函数，当您想在组件卸载时或下次运行useEffect之前运行某些内容时使用

在你的情况下，你只需要在useEffect中获取数据，在这种情况下，你只需要调用fetchAPI而不返回它

useEffect(() => {
const fetchAPI = async () => {
let dataCountries = await fetchAPIDataCountries();
setCountries(dataCountries)`enter code here`;
};
fetchAPI();
}, []);

Answer 2

return () => fetchAPI()

用作 compoentWillUnmount(( 生命周期方法，因此上面的代码将在组件卸载时执行。 您必须执行以下操作

useEffect(() => {
const fetchAPI = async () => {
let dataCountries = await fetchAPIDataCountries();
setCountries(dataCountries)`enter code here`;
};
fetchAPI();
}, []);