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

 

 

 

上一篇:[Bash] Run `npm install` when package.json changes in githook


下一篇:基于 React hooks + Typescript + Cesium 实现图层管理