How to call an async function inside useEffect() in React?

在React的useEffect钩子中直接调用异步函数会引起问题，因为useEffect不允许你直接返回一个promise。但是，你可以在useEffect内部定义一个异步函数并立即调用它。例如：

jsx
import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 定义一个异步函数
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Fetching data error:', error);
      }
    };

    // 调用异步函数
    fetchData();
  }, []); // 空数组意味着这个effect函数只会在组件挂载时运行一次

  // 渲染组件
  return (
    <div>
      {data ? (
        <div>{JSON.stringify(data)}</div>
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
}

export default MyComponent;

在上面的例子中，useEffect里面的fetchData是一个异步函数，它负责处理数据的获取。fetchData被定义后立即调用。注意，我们在useEffect中传入了一个空数组作为第二个参数，这样可以确保useEffect只会在组件挂载的时候执行一次。

另外，如果你的异步逻辑需要在组件卸载时执行清理工作，你可以在useEffect中返回一个清理函数，但这个清理函数不能是异步的。如果需要，你应该在清理函数中处理异步逻辑的取消或者清理操作。例如：

jsx
useEffect(() => {
  let isActive = true;

  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      if (isActive) {
        const result = await response.json();
        setData(result);
      }
    } catch (error) {
      if (isActive) {
        console.error('Fetching data error:', error);
      }
    }
  };

  fetchData();

  // 清理函数
  return () => {
    isActive = false;
  };
}, []);

在这个例子中，我们使用了一个isActive变量来跟踪组件的挂载状态。如果组件在数据请求完成前卸载了，我们通过isActive来确保不会调用setData或者console.error。这样我们就可以避免在组件已经卸载之后执行这些操作，从而避免潜在的内存泄漏问题。