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

 

 

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐