React.js，等待setState在触发函数之前完成？

Question

这里是我的情况：

• 上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> 
       ); 
      } 
     }); 

Answer 1

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()通话， 作为第二个参数内。
没有()，因为你正在传递函数。

Answer 2

根据setState()的文档，新状态可能不会反映在回调函数findRoutes()中。下面是从React docs提取物：）

的setState（不立即发生变异this.state而造成挂起状态转变。调用此方法后访问this.state可能会返回现有值。

无法保证对setState的调用进行同步操作，并且可能会调用调用以提高性能。

所以这里是我建议你应该做的。您应该在回调函数findRoutes()中传递新状态input。

handleFormSubmit: function(input){ 
    // Form Input 
    this.setState({ 
     originId: input.originId, 
     destinationId: input.destinationId, 
     radius: input.radius, 
     search: input.search 
    }); 
    this.findRoutes(input); // Pass the input here 
} 

的findRoutes()功能应该被定义是这样的：

findRoutes: function(me = this.state) { // This will accept the input if passed otherwise use this.state 
    if (!me.originId || !me.destinationId) { 
     alert("findRoutes!"); 
     return; 
    } 
    var p1 = new Promise(function(resolve, reject) { 
     directionsService.route({ 
      origin: {'placeId': me.originId}, 
      destination: {'placeId': me.destinationId}, 
      travelMode: me.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 
}