React.js, फ़ंक्शन ट्रिगर करने से पहले सेटस्टेट को समाप्त करने के लिए प्रतीक्षा करें?

Question

यहाँ मेरी स्थिति है:

this.handleFormSubmit पर
• () मैं this.setState()
this.handleFormSubmit(), मैं this.findRoutes बोल रहा हूँ अंदर
• () को क्रियान्वित कर रहा हूँ; - जो इस .setState()
• this.setState() के सफल समापन पर निर्भर करता है; इससे पहले पूरा नहीं होता है। findRoutes को बुलाया जाता है ...
• मैं इस के अंदर इस .setState() के अंदर कैसे प्रतीक्षा करूं ..handleFormSubmit() इसे कॉल करने से पहले खत्म करने के लिए .findRoutes()?

एक subpar समाधान:

• 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 से निकास निकाला गया है:

सेटस्टेट() तुरंत इस.स्टेट को म्यूटेट नहीं करता है लेकिन लंबित राज्य संक्रमण बनाता है। इस विधि को कॉल करने के बाद this.state तक पहुंचने से मौजूदा मान वापस आ सकता है।

सेटस्टेट पर कॉल के सिंक्रोनस ऑपरेशन की कोई गारंटी नहीं है और प्रदर्शन लाभ के लिए कॉल का बैच किया जा सकता है।

तो मैं यह प्रस्तावित करता हूं कि आपको क्या करना चाहिए। आपको कॉलबैक फ़ंक्शन 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 
}