我的情况如下:
低于标准的解决方案:
请参阅下面的代码片段:
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> ); } });
setState()有一个可选的回调参数,你可以使用它来实现这一点。你只需要稍微修改一下代码,如下所示:
setState()
// Form Input this.setState( { originId: input.originId, destinationId: input.destinationId, radius: input.radius, search: input.search }, this.findRoutes // here is where you put the callback );
请注意,对的调用findRoutes现在位于setState()调用内部,作为第二个参数。 没有,()因为您正在传递函数。
findRoutes
()