如何在react render中使用异步javascript

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  componentDidMount() {
    this.fetchData().then(data => {
      this.setState({ data });
    });
  }

  fetchData() {
    return new Promise(resolve => {
      // 异步操作，例如发送网络请求
      setTimeout(() => {
        resolve('异步数据');
      }, 1000);
    });
  }

  render() {
    const { data } = this.state;
    if (data === null) {
      return <div>Loading...</div>;
    }
    return <div>{data}</div>;
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  async componentDidMount() {
    const data = await this.fetchData();
    this.setState({ data });
  }

  fetchData() {
    return new Promise(resolve => {
      // 异步操作，例如发送网络请求
      setTimeout(() => {
        resolve('异步数据');
      }, 1000);
    });
  }

  render() {
    const { data } = this.state;
    if (data === null) {
      return <div>Loading...</div>;
    }
    return <div>{data}</div>;
  }
}

const MyComponent = React.lazy(() => import('./MyComponent'));

class App extends React.Component {
  render() {
    return (
      <React.Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </React.Suspense>
    );
  }
}