无法在render中的方法内显示promise数据

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null, // 初始状态为null
    };
  }

  componentDidMount() {
    // 在组件挂载后，执行异步操作
    fetchData().then(data => {
      this.setState({ data }); // 更新状态为Promise的结果
    });
  }

  render() {
    const { data } = this.state;
    if (data === null) {
      return <div>Loading...</div>; // 在数据未完成加载前显示加载中的提示
    }
    return <div>{data}</div>; // 在数据加载完成后显示数据
  }
}

// 模拟异步操作，返回一个Promise
function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Promise数据');
    }, 1000);
  });
}

export default MyComponent;