在 useEffect 中针对异步函数的 React Hook 警告答案

【问题标题】：React Hook Warnings for async function in useEffect在 useEffect 中针对异步函数的 React Hook 警告
【发布时间】：2020-05-18 04:21:55
【问题描述】：

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 获取数据，但我尝试删除 useEffect() 中的 return() 刚刚写了 fetchAPI()，没关系。我不知道这里发生了什么，谁能解释一下。谢谢。

【问题讨论】：

您在useEffect() 中定义了一个fetchAPI 函数，但实际上并没有在任何地方调用它。不用担心返回 API 调用，在您定义 const FetchAPI = ... 之后，只需在下一行调用它，fetchAPI()。
你写它的方式，你告诉 react 打电话给 fetchAPI componentWillUnmount。

标签： reactjs axios react-hooks

【解决方案1】：

useEffect 中的函数返回值是一个清理函数，用于在卸载组件时或在下次运行 useEffect 之前运行某些东西时使用

在您的情况下，您只需在 useEffect 中获取 fetchData，在这种情况下，您只需要调用 fetchAPI 而不是返回它

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

【讨论】：

【解决方案2】：

return () => fetchAPI()

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

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

【讨论】：