在 useEffect 中使用异步函数

在 React 组件中，使用 useEffect 是一个常见的场景。但是，有时候我们需要在 useEffect 中使用一个异步函数。那么，如何在 useEffect 中使用异步函数呢？

使用 async/await

我们可以使用 async/await 来解决这个问题。在 useEffect 中声明一个异步函数，并使用 await 关键字等待 promise 的解决。下面是一个例子：

import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState({});

  useEffect(() => {
    async function fetchData() {
      const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
      const json = await response.json();
      setData(json);
    }
    fetchData();
  }, []);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.completed ? "Completed" : "Not completed"}</p>
    </div>
  );
}

export default App;

在上面的例子中，我们使用了 async/await 来等待 fetch 请求返回的 promise，然后将结果存储在组件状态中。

使用 .then() 方法

我们也可以使用 .then() 方法来处理异步请求。下面是一个例子：

import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState({});

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((json) => setData(json));
  }, []);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.completed ? "Completed" : "Not completed"}</p>
    </div>
  );
}

export default App;

在上面的例子中，我们使用了 .then() 方法来等待 fetch 请求返回的 promise，然后将结果存储在组件状态中。

注意事项

在使用 useEffect 时，需要注意异步函数的生命周期。如果异步请求在组件卸载之前没有完成，那么可能会产生内存泄漏，从而导致组件崩溃。

为了避免这种情况发生，我们需要在 useEffect 中返回一个清除函数：

useEffect(() => {
  async function fetchData() {
    // 异步请求
  }

  fetchData();

  // 返回一个清除函数
  return () => {
    // 取消异步请求
  }
}, []);

总结

在 useEffect 中使用异步函数可以很容易地实现数据请求和状态管理。然而，需要注意异步函数的生命周期，避免产生内存泄漏。我们可以使用 async/await 或 .then() 方法来处理异步请求，并在 useEffect 中返回一个清除函数来取消异步请求，从而保证组件的健壮性。