💡 React Hooks：useEffect 中的异步函数

为什么会发生这种情况？

当你刚开始学习 React Hooks 时，你可能会注意到，如果在 useEffect Hook 中使用异步函数，就会出现警告和错误。让我们来了解一下为什么会发生这种情况。

关于如何在 React Hooks 中使用异步的文章和问题有几十篇：

为什么会发生这种情况？

异步函数总是返回一个承诺，因此在承诺实现之前你不会得到实际值。

反模式：直接在 useEffect 中使用异步函数

React 可以运行此异步函数，但无法运行清理函数。
请勿在 useEffect 中直接使用原始异步函数。

useEffect(async () => {
  console.log('Hi :)')

  return () => {
    console.info('Bye!') // It won't run
  };
}, []);

代码示例：在异步函数中使用 unmount。

除非您在回调之前使用 await 表达式，否则您不必卸载回调。

unmount = await (async () => {
  console.log('Hi :)')

  return () => {
    console.info('Bye!')
  };
})()
unmount()
// Hi :)
// Bye!

代码示例：在函数中使用 unmount。

unmount = (() => {
  console.log('Hi :)')

  return () => {
    console.info('Bye!') // 👍 
  };
})()
unmount()
// Hi :)
// Bye!

代码示例：在 useEffect 中使用异步函数。

您可以在 useEffect 回调中创建一个异步函数，正如 Nick 在他的文章中提到的那样。

  useEffect(() => {
    (async () => {
      const products = await api.index()
      setFilteredProducts(products)
      setProducts(products)
    })()

    return () => {
      unsubscribeOrRemoveEventHandler() // 👍 
    }
  }, [])

我希望你觉得这篇文章有用。

文章来源：https://dev.to/danialdezfouli/what-s-wrong-with-the-async-function-in-useeffect-4jne