在API调用后推迟React中设置值的正确方法？

import React, { Component } from 'react';

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

  componentDidMount() {
    // 发起API调用
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // 将返回的数据保存到状态中
        this.setState({ data });
      });
  }

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

    if (data === null) {
      // 数据还未加载完成，可以显示加载中的提示
      return <div>Loading...</div>;
    }

    // 数据加载完成，渲染数据
    return <div>{data}</div>;
  }
}

export default MyComponent;