相关文章推荐
怕老婆的水龙头  ·  Premature end of ...·  1 年前    · 
乖乖的红薯  ·  使用 RAG 開始使用 .NET ...·  2 年前    · 
不拘小节的吐司  ·  matplotlib+cartopy+geo ...·  2 年前    · 
灰常酷的楼房  ·  小前端读源码 - ...·  3 年前    · 
卖萌的登山鞋  ·  【Git|GitHub|SSH|Source ...·  3 年前    · 

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();
}, []);