这是我的情况:
- 在 this.handleFormSubmit() 上我正在执行 this.setState()
- 在 this.handleFormSubmit() 内部,我调用 this.findRoutes(); - 这取决于 this.setState() 的成功完成
- this.setState();在调用 this.findRoutes 之前未完成...
- 在调用 this.findRoutes() 之前,如何等待 this.handleFormSubmit() 内部的 this.setState() 完成?
低于标准的解决方案:
- 将 this.findRoutes() 放入 componentDidUpdate() 中
- 这是不可接受的,因为将会有更多与 findRoutes() 函数无关的状态更改。我不想在更新不相关的状态时触发 findRoutes() 函数。
请参阅下面的代码片段:
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()
有一个可选的回调参数可以用于此目的。您只需稍微更改一下代码即可:
// 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()
称呼,
作为第二个参数。
没有()
因为你正在传递该函数。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)