时间戳

首页 > 解决方案 > 在 useEffect 中针对异步函数的 React Hook 警告

reactjs - 在 useEffect 中针对异步函数的 React Hook 警告

问题描述

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()

标签： reactjsaxiosreact-hooks

解决方案

return () => fetchAPI()

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

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

推荐阅读