Esta es mi situación:
- en this.handleFormSubmit () Estoy ejecutando this.setState ()
- dentro de this.handleFormSubmit (), estoy llamando a this.findRoutes (); - que depende de la finalización exitosa de this.setState ()
- this.setState (); no se completa antes de que se llame a this.findRoutes ...
- ¿Cómo espero a que termine this.setState () dentro de this.handleFormSubmit () antes de llamar a this.findRoutes ()?
Una solución insatisfactoria:
- poniendo this.findRoutes () en componentDidUpdate ()
- esto no es aceptable porque habrá más cambios de estado no relacionados con la función findRoutes (). No quiero activar la función findRoutes () cuando se actualiza el estado no relacionado.
Consulte el fragmento de código a continuación:
handleFormSubmit: function(input){
// Form Input
this.setState({
originId: input.originId,
destinationId: input.destinationId,
radius: input.radius,
search: input.search
})
this.findRoutes();
},
handleMapRender: function(map){
// Intialized Google Map
directionsDisplay = new google.maps.DirectionsRenderer();
directionsService = new google.maps.DirectionsService();
this.setState({map: map});
placesService = new google.maps.places.PlacesService(map);
directionsDisplay.setMap(map);
},
findRoutes: function(){
var me = this;
if (!this.state.originId || !this.state.destinationId) {
alert("findRoutes!");
return;
}
var p1 = new Promise(function(resolve, reject) {
directionsService.route({
origin: {'placeId': me.state.originId},
destination: {'placeId': me.state.destinationId},
travelMode: me.state.travelMode
}, function(response, status){
if (status === google.maps.DirectionsStatus.OK) {
// me.response = response;
directionsDisplay.setDirections(response);
resolve(response);
} else {
window.alert('Directions config failed due to ' + status);
}
});
});
return p1
},
render: function() {
return (
<div className="MapControl">
<h1>Search</h1>
<MapForm
onFormSubmit={this.handleFormSubmit}
map={this.state.map}/>
<GMap
setMapState={this.handleMapRender}
originId= {this.state.originId}
destinationId= {this.state.destinationId}
radius= {this.state.radius}
search= {this.state.search}/>
</div>
);
}
});