[转]React hooks useEffect中如何使用异步函数（即如何使用async/await）

1. useEffect 的回调参数返回的是一个清除副作用的 clean-up 函数。因此无法返回 Promise，更无法使用 async/await

2.如何让useEffect支持async/await

2.1、方法一（推荐）：useEffect中异步函数采用IIFE写法（ Immediately Invoked Function Expression即立即调用的函数式表达式）

const MyFunctionnalComponent: React.FC = props => {
  useEffect(() => {
    // Using an IIFE
    (async function anyNameFunction() {
      await loadContent();
    })();
  }, []);
  return <div></div>;
};

　　

2.2方法二：此时可以选择再包装一层 async 函数，置于 useEffect 的回调函数中，变相使用 async/await

const fetchMyAPI =async()=> {
  let response = await fetch('api/data')
  response = await res.json()
  dataSet(response)
}
 
useEffect(() => {
  fetchMyAPI();
}, []);

　　

2.3方法三：在内部创建一个异步函数，等待getData(1)结果，然后调用setData():

useEffect(() => {
  const fetchMyAPI = async () =>{
      const data = await getData(1);
      setData(data)
  }
  fetchMyAPI();
}, []);

　　

摘自：https://blog.csdn.net/zhongzk69/article/details/116266085