为什么函数没有在组件中返回数据，尽管它正确地出现在控制台上？

import React from 'react';

function fetchData() {
  // 模拟异步请求数据
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('这是从函数返回的数据');
    }, 1000);
  });
}

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

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

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

    return (
      <div>
        {data ? (
          <p>{data}</p>
        ) : (
          <p>正在加载数据...</p>
        )}
      </div>
    );
  }
}

export default MyComponent;