Map在fetch之后的setState之后不起作用

import React, { Component } from 'react';

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

  componentDidMount() {
    this.fetchData();
  }

  fetchData = () => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // 确保在正确的上下文中调用 setState
        this.setState({ data: new Map(data) }, () => {
          console.log('State updated:', this.state.data);
        });
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  };

  render() {
    return (
      <div>
        {/* 渲染数据 */}
        {Array.from(this.state.data.entries()).map(([key, value]) => (
          <div key={key}>{key}: {value}</div>
        ))}
      </div>
    );
  }
}

export default MyComponent;