Warum wird Google Maps nicht mit neuen Koordinaten neu geladen, mit dem Rest der Listendetails?

Question

Ich habe eine Liste von Ereignissen und jedes Ereignis hat eine Klick-Funktion, die die Details dieses Ereignisses anzeigt. Jedes Detail enthält eine Google-Karte, die die Koordinaten des angeklickten Ereignisobjekts ermittelt.

Mein Problem ist folgendes: Wenn ich zum ersten Mal auf ein Ereignis klicke, erscheint das Detail korrekt, mit dem richtigen Titel, dem Namen des Ortes und der Karte. Aber der zweite Klick rendert das neue Detail des neuen Ereignisses mit dem korrekten Titel, dem Namen des Ortes, aber die Karte ändert sich nicht.

Warum wird die Karte nicht mit den neuen Koordinaten neu geladen?

hier ist der Code für den Container 'Ereignisliste':

import React from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import { selectEvent } from '../actions/index.js'; 

class EventsList extends React.Component { 
    render() { 
     var createEventsList = this.props.events.map((event, i) => { 
      return <li key={i} onClick={() => this.props.selectEvent(event)}>{event.title}</li> 
     }); 
     return(
      <ul>{createEventsList}</ul>  
     ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
     events: state.events 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ selectEvent: selectEvent }, dispatch); 
} 

export default connect(mapStateToProps, mapDispatchToProps)(EventsList); 

der Code für den Container 'Ereignisdetails':

import React from 'react'; 
import { connect } from 'react-redux'; 
import GoogleMap from '../components/google_map.js'; 

class EventDetail extends React.Component{ 
    render() { 
     if(!this.props.event) { 
      return <div>Pick an Event</div> 
     } 
     const latcoord = parseFloat(this.props.event.locationLat); 
     const longcoord = parseFloat(this.props.event.locationLong); 


     return(
      <div> 
       <div>details for:</div> 
       <div>{ this.props.event.title }</div> 
       <div>{ this.props.event.location }</div> 
       <GoogleMap long={longcoord} lat={latcoord}/> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
     event: state.eventDetail 
    }; 
} 

export default connect(mapStateToProps)(EventDetail); 

und hier ist der Code für die Google Map Komponente :

Answer 1

Da componentDidMount wird nur einmal aufgerufen, wenn die Komponente bereitgestellt ist, wenn Sie auf o klicken Bei einem Ereignis zum zweiten Mal wird die Karte nicht aktualisiert. Um dies zu korrigieren, müssen Sie die Funktion componentDidUpdate() implementieren. Außerdem sollten Sie die Karte in einem Zustand oder in diesem Kontext speichern. Sie möchten nicht immer eine neue Karte erstellen.

componentDidMount() { 
     this.map = new google.maps.Map(this.refs.map, { 
      zoom: 15, 
      center: { 
       lat: this.props.lat, 
       lng: this.props.long 
      } 
     }); 
} 

componentDidUpdate() { 
     this.map.panTo(new google.maps.LatLng(this.props.lat, this.props.lng)); 
} 

Ich hoffe, es hilft. :)