useEffect 中如何使用 async/await
Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 236
Author 回答者: shfshanyue
function useEffect(effect: EffectCallback, deps?: DependencyList): void;
type EffectCallback = () => void | (() => void | undefined);
根据文档及 ts 的提示来看,useEffect
的回调参数返回的是一个清除副作用的 clean-up
函数。因此无法返回 Promise
,更无法使用 async/await
useEffect(() => {
const subscription = props.source.subscribe();
return () => {
// Clean up the subscription
subscription.unsubscribe();
};
});
此时可以选择再包装一层 async 函数,置于 useEffect 的回调函数中,变相使用 async/await
async function fetchMyAPI() {
let response = await fetch("api/data");
response = await res.json();
dataSet(response);
}
useEffect(() => {
fetchMyAPI();
}, []);
Author 回答者: jkLennon
useEffect(() => { (async function anyNameFunction() { await loadContent(); })(); }, []);