useEffect中使用异步函数

useEffect是不能直接用 async await 语法糖的

/* 错误用法 ，effect不支持直接 async await*/
 useEffect(async ()=>{
        /* 请求数据 */
      const res = await getData()
 },[])

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

那我们应该如何让useEffect支持async/await呢？

方法一（推荐）

const App = () => {

  useEffect(() => {
    (async function handle() {
      await getData();
    })();
  }, []);

  return <div></div>;
};

方法二

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