[解決済み] React.js、関数を起動する前にsetStateが終了するのを待つ？

質問

私の状況を説明します。

• this.handleFormSubmit() で this.setState() を実行しています。
• this.handleFormSubmit() の内部で this.findRoutes(); を呼び出していますが、これは this.setState() の正常終了に依存します。
• this.setState(); は this.findRoutes が呼び出される前に完了しません。
• this.handleFormSubmit()内のthis.setState()が終了するのを待ってからthis.findRoutes()を呼び出すにはどうしたらいいですか？

劣悪なソリューションです。

• componentDidUpdate() に this.findRoutes() を入れる。
• というのは、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() の呼び出しになります。 を2番目のパラメータとして使用します。

がなければ () は、関数を渡しているからです。