如何在React TypeScript中渲染异步函数的输出？

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

const AsyncComponent: React.FC = () => {
  const [data, setData] = useState<any>(null);

  useEffect(() => {
    // 异步函数
    const fetchData = async () => {
      const result = await yourAsyncFunction();
      setData(result);
    };

    fetchData();
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return <div>{data}</div>;
};

export default AsyncComponent;

import React from 'react';
import AsyncComponent from './AsyncComponent';

const ParentComponent: React.FC = () => {
  return (
    <div>
      <h1>Parent Component</h1>
      <AsyncComponent />
    </div>
  );
};

export default ParentComponent;