等待请求返回React中的组件

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

const LoadingComponent = () => {
  return <div>Loading...</div>;
};

const DataComponent = () => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    // 模拟异步请求
    await new Promise(resolve => setTimeout(resolve, 2000));

    // 请求完成后更新数据和加载状态
    setData('Some data');
    setIsLoading(false);
  };

  return (
    <div>
      {isLoading ? <LoadingComponent /> : <div>{data}</div>}
    </div>
  );
};

export default DataComponent;