React.js, attendere che setState finisca prima di attivare una funzione?

Ecco la mia situazione:

• su this.handleFormSubmit () sto eseguendo this.setState ()
• dentro this.handleFormSubmit (), chiamo this.findRoutes (); - che dipende dal completamento con successo di this.setState ()
• this.setState (); non viene completato prima di questo .indRoutes viene chiamato ...
• Come aspetto che this.setState () all'interno di this.handleFormSubmit () finisca prima di chiamare this.findRoutes ()?

Una soluzione scadente:

• mettendo this.findRoutes () in componentDidUpdate ()
• questo non è accettabile perché ci saranno più cambiamenti di stato non correlati alla funzione findRoutes (). Non voglio attivare la funzione findRoutes () quando lo stato non correlato viene aggiornato.

Vedere lo snippet di codice di seguito:

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()ha un parametro di callback opzionale che puoi usare per questo. Hai solo bisogno di cambiare leggermente il tuo codice, in questo:

// 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
);

Notare che la chiamata a findRoutesè ora all'interno della setState()chiamata, come secondo parametro.
Senza ()perché stai passando la funzione.

       this.setState(
        {
            originId: input.originId,
            destinationId: input.destinationId,
            radius: input.radius,
            search: input.search
        },
        function() { console.log("setState completed", this.state) }
       )

questo potrebbe essere utile

Secondo i documenti del setState()nuovo stato potrebbe non riflettersi nella funzione di callback findRoutes(). Ecco l'estratto dai documenti di React :

setState () non modifica immediatamente this.state ma crea una transizione di stato in sospeso. L'accesso a this.state dopo aver chiamato questo metodo può potenzialmente restituire il valore esistente.

Non vi è alcuna garanzia di funzionamento sincrono delle chiamate a setState e le chiamate possono essere raggruppate in batch per migliorare le prestazioni.

Quindi ecco cosa ti propongo di fare. È necessario passare i nuovi stati inputnella funzione di callback findRoutes().

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
}

La findRoutes()funzione dovrebbe essere definita in questo modo:

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
}