如何创建设置异步侦听器的react钩子？

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 在这里设置异步侦听器
    const fetchData = async () => {
      try {
        // 执行异步操作，例如发送网络请求
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        
        // 更新组件的状态
        // ...
      } catch (error) {
        // 处理错误
        // ...
      }
    };

    fetchData();

    // 清理函数（可选）
    return () => {
      // 在组件卸载时清理异步侦听器
      // ...
    };
  }, []); // 依赖数组为空，只在组件首次渲染时运行

  return (
    // 组件的 JSX
    // ...
  );
}

export default MyComponent;