web-dev-qa-db-ja.com

React.js、setStateが完了するのを待ってから関数をトリガーしますか？

私の状況は次のとおりです。

  • this.handleFormSubmit（）でthis.setState（）を実行しています
  • this.handleFormSubmit（）内で、this.findRoutes（）を呼び出しています。 -これは、this.setState（）の正常終了に依存します
  • this.setState（）; this.findRoutesが呼び出される前に完了しません...
  • this.findForms（）を呼び出す前に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>
                );
            }
        });
javascriptreactjsstate
73
malexanders

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への呼び出しは、2番目のパラメーターとしてsetState()呼び出し内にあることに注意してください。
関数を渡すため、()なし。

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

これは役に立つかもしれません

11
Harshit Singhai

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
}
8
Pawan Samdani