如何在从服务器接收数据后更新React Google Map

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

class MapComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      markers: [],
    };
  }

  render() {
    return (
      <div style={{ height: '400px', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: 'YOUR_GOOGLE_MAPS_API_KEY' }}
          defaultCenter={{ lat: 0, lng: 0 }}
          defaultZoom={1}
        >
          {/* Render markers */}
          {this.state.markers.map(marker => (
            <Marker
              key={marker.id}
              lat={marker.lat}
              lng={marker.lng}
            />
          ))}
        </GoogleMapReact>
      </div>
    );
  }
}

const Marker = () => <div>Marker</div>;

export default MapComponent;

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

class MapComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      markers: [],
    };
  }

  componentDidMount() {
    // 发起网络请求从服务器获取数据
    fetch('YOUR_API_URL')
      .then(response => response.json())
      .then(data => {
        this.setState({ markers: data });
      })
      .catch(error => {
        console.error('Error:', error);
      });
  }

  render() {
    return (
      <div style={{ height: '400px', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: 'YOUR_GOOGLE_MAPS_API_KEY' }}
          defaultCenter={{ lat: 0, lng: 0 }}
          defaultZoom={1}
        >
          {/* Render markers */}
          {this.state.markers.map(marker => (
            <Marker
              key={marker.id}
              lat={marker.lat}
              lng={marker.lng}
            />
          ))}
        </GoogleMapReact>
      </div>
    );
  }
}

const Marker = () => <div>Marker</div>;

export default MapComponent;