Oto moja sytuacja:
- on this.handleFormSubmit () Wykonuję this.setState ()
- wewnątrz this.handleFormSubmit (), wzywam this.findRoutes (); - co zależy od pomyślnego zakończenia this.setState ()
- this.setState (); nie kończy się przed tym. findRoutes zostanie wywołany ...
- Jak mam czekać, aż this.setState () wewnątrz this.handleFormSubmit () zakończy się przed wywołaniem this.findRoutes ()?
Słabe rozwiązanie:
- umieszczenie this.findRoutes () w componentDidUpdate ()
- jest to niedopuszczalne, ponieważ będzie więcej zmian stanu niezwiązanych z funkcją findRoutes (). Nie chcę wyzwalać funkcji findRoutes () po zaktualizowaniu niepowiązanego stanu.
Zobacz fragment kodu poniżej:
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
malexanders
źródło
źródło
this.setState({ name: "myname" }, function() { console.log("setState completed", this.state) })
to może być pomocne
źródło
Zgodnie z dokumentacją
setState()
nowy stan może nie zostać odzwierciedlony w funkcji wywołania zwrotnegofindRoutes()
. Oto wyciąg z dokumentacji React :Oto, co proponuję, abyś zrobił. Nowe stany należy przekazać
input
w funkcji wywołania zwrotnegofindRoutes()
.findRoutes()
Funkcja powinna być zdefiniowana następująco:źródło
setState()
ponieważ nowy stan nie jest dobry, ponieważ prowadzi do warunków wyścigusetState
przyjmuje nowy stan i opcjonalną funkcję zwrotną, która jest wywoływana po zaktualizowaniu stanu.źródło
Dlaczego nie jeszcze jedna odpowiedź?
setState()
isetState()
-triggeredrender()
zakończyły wykonywanie podczas wywołaniacomponentDidMount()
(pierwszerender()
wykonanie) i / lubcomponentDidUpdate()
(w dowolnym momencie porender()
wykonaniu). (Linki prowadzą do dokumentacji ReactJS.org).Przykład z
componentDidUpdate()
Dzwoniący, ustaw referencję i ustaw stan ...
Renderuj rodzic ...
Przykład z
componentDidMount()
Dzwoniący, ustaw referencję i ustaw stan ...
Renderuj rodzic ...
Gdy rodzic przekaże dziecko, zobacz stan w
componentDidUpdate()
.źródło