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

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

2.如何让useEffect支持async/await

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

?

1 2 3 4 5 6 7 8 9

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

　　

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

?

1 2 3 4 5 6 7 8 9

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

　　

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

?

1 2 3 4 5 6 7

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

　　

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