Render在异步方法结束之前正在运行。如何通过异步方法将道具传递给组件？

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

function MyComponent(props) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        // 假设这是你的异步方法，比如从API获取数据
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []); // 空依赖数组确保只在组件挂载时执行一次

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

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

  // 当数据加载完成后，将数据作为props传递给子组件
  return <ChildComponent data={data} />;
}

function ChildComponent({ data }) {
  // 使用传递过来的数据
  return <div>{JSON.stringify(data)}</div>;
}

export default MyComponent;