useEffect 中如何使用 async/await

Issue

欢迎在 Issue 中交流与讨论: Issue 236 (opens new window)

Author

回答者: shfshanyue (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();
}, []);