React js如何返回带有异步超时的div

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

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

  useEffect(() => {
    // 在这里进行异步操作，例如发送请求获取数据
    // 请求完成后更新状态变量
    setTimeout(() => {
      setIsLoading(false);
      setData('异步数据');
    }, 3000); // 设置超时时间为 3000 毫秒
  }, []);

  return (
    <div>
      {isLoading ? (
        <div>加载中...</div>
      ) : (
        <div>{data}</div>
      )}
    </div>
  );
}

export default MyComponent;