如何在 useEffect 中使用异步函数？

在 React 中，我们都一定使用过 useEffect hook，它在执行 DOM 更新后运行，并帮助我们在渲染后执行一些操作。

在探索在 useEffect 内部进行异步调用的不同方法之前，让我们先讨论一下其背后的问题。

为什么我们不应该将async关键字与 useEffect 一起使用？

让我们举一个例子来理解这一点。

const [state, setState] = useState(0)

useEffect(async () => {
    await setState((state) => state + 1);
}, []);

上面的代码会报错，因为async 函数返回的是 promise，而 useEffect 并不期望回调函数返回 promise。它应该返回空值或者一个函数。

如何在 useEffect 中调用异步函数？🤔

为了在 useEffect hook 中进行异步调用，我们可以使用以下方法。

• 在 useEffect 中定义异步函数。

 useEffect(() => {
   const fetchData = async()=> {
     const data = await getData()

     return data
   }
   fetchData()
 }, []);

• 在 useEffect 之外定义异步函数。

  const [state, setState] = useState(0)

  const fetchData = useCallback(async()=> {
    const data = await getData();
    setState(data)
  }, [])

  useEffect(() => {
    fetchData()
  }, [fetchData]);

在这种情况下，我们需要将异步函数包装在 useCallback 中，以便将其与依赖数组进行映射。

注意 - 如果我们不使用钩子包装函数，useCallback它将在每次更新时重新渲染，这将导致再次触发 useEffect 钩子。

我已经用这两种方法将异步函数与 useEffect 结合使用。欢迎您就此主题补充任何重要观点或其他方法。🙌🏻

学习愉快！👩🏻‍💻