Hier ist meine Situation:
- on this.handleFormSubmit () Ich führe this.setState () aus
- In this.handleFormSubmit () rufe ich this.findRoutes () auf. - was vom erfolgreichen Abschluss von this.setState () abhängt
- this.setState (); wird nicht abgeschlossen, bevor this.findRoutes aufgerufen wird ...
- Wie warte ich, bis this.setState () in this.handleFormSubmit () beendet ist, bevor ich this.findRoutes () aufrufe?
Eine unterdurchschnittliche Lösung:
- Setzen von this.findRoutes () in componentDidUpdate ()
- Dies ist nicht akzeptabel, da es weitere Statusänderungen gibt, die nicht mit der Funktion findRoutes () zusammenhängen. Ich möchte die Funktion findRoutes () nicht auslösen, wenn der Status ohne Bezug aktualisiert wird.
Bitte beachten Sie das folgende Code-Snippet:
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>
);
}
});
javascript
reactjs
state
Malexander
quelle
quelle
this.setState({ name: "myname" }, function() { console.log("setState completed", this.state) })
Dies könnte hilfreich sein
quelle
Laut den Dokumenten des
setState()
neuen Status wird möglicherweise nicht in der Rückruffunktion wiedergegebenfindRoutes()
. Hier ist der Auszug aus den React-Dokumenten :Ich schlage vor, dass Sie Folgendes tun sollten. Sie sollten die neuen Zustände
input
in der Rückruffunktion übergebenfindRoutes()
.Die
findRoutes()
Funktion sollte folgendermaßen definiert werden:quelle
setState()
da der neue Staat nicht gut ist, weil es zu Rennbedingungen führt