如何在异步方法之后呈现组件？

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

function MyComponent() {
  const [data, setData] = useState(null); // 定义一个状态变量，初始值为null

  useEffect(() => {
    fetchData(); // 异步方法调用
  }, []);

  // 异步方法，模拟请求数据
  async function fetchData() {
    const response = await fetch('https://api.example.com/data'); // 异步请求数据
    const result = await response.json(); // 解析响应数据

    setData(result); // 更新状态变量
  }

  return (
    <div>
      {data ? (
        <div>{/* 在数据存在时渲染组件内容 */}</div>
      ) : (
        <div>Loading...</div> // 在数据不存在时显示加载中的提示
      )}
    </div>
  );
}

export default MyComponent;

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null, // 定义一个状态变量，初始值为null
    };
  }

  componentDidMount() {
    this.fetchData(); // 异步方法调用
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.data !== this.state.data) {
      // 异步方法执行完毕后，触发组件的重新渲染
      // 这里可以根据实际需求添加条件判断，避免不必要的重新渲染
    }
  }

  // 异步方法，模拟请求数据
  async fetchData() {
    const response = await fetch('https://api.example.com/data'); // 异步请求数据
    const result = await response.json(); // 解析响应数据

    this.setState({ data: result }); // 更新状态变量
  }

  render() {
    const { data } = this.state;

    return (
      <div>
        {data ? (
          <div>{/* 在数据存在时渲染组件内容 */}</div>
        ) : (
          <div>Loading...</div> // 在数据不存在时显示加载中的提示
        )}
      </div>
    );
  }
}

export default MyComponent;