极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。
每天晚上九点 B站讲解前端工程化直播,并解答相关问题。

# useEffect 中如何使用 async/await

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 236 (opens new window)

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 (opens new window)

useEffect(() => { (async function anyNameFunction() { await loadContent(); })(); }, []);

Last Updated: 11/27/2021, 10:11:48 AM