为Typescript React原生功能组件创建Promise

import React from 'react';

// 定义一个异步函数，返回一个Promise对象
async function fetchData(): Promise<string> {
  return new Promise((resolve) => {
    // 模拟异步操作
    setTimeout(() => {
      resolve('Data fetched successfully!');
    }, 2000);
  });
}

// 创建一个React原生功能组件
const MyComponent: React.FC = () => {
  const [data, setData] = React.useState<string>('');

  // 在组件渲染时调用异步函数
  React.useEffect(() => {
    const fetchDataAsync = async () => {
      try {
        const result = await fetchData();
        setData(result);
      } catch (error) {
        console.error('Failed to fetch data:', error);
      }
    };

    fetchDataAsync();
  }, []);

  return (
    <div>
      <h1>Promise Example</h1>
      <p>{data}</p>
    </div>
  );
};

export default MyComponent;