React.js,在触发函数之前等待setState完成?


105

这是我的情况:

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

Answers:


245

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
惊人!非常感谢
malexanders's

这对于在ReactNative中的setState之后重置AnimatedValue非常有用。
SacWebDeveloper

很棒〜非常感谢
吴强福

2
通用版本this.setState({ name: "myname" }, function() { console.log("setState completed", this.state) })
Sasi Varunan

看起来您不能将多个回调传递给setState。链接回调有一种混乱的方式吗?可以说我有3种方法都需要运行,并且都需要更新状态。处理此问题的首选方法是什么?
肖恩

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

这可能会有所帮助


10

根据文档,setState()新状态可能不会反映在回调函数中findRoutes()。这是React docs的摘录:

setState()不会立即更改this.state,但会创建一个挂起的状态转换。调用此方法后访问this.state可能会返回现有值。

无法保证对setState的调用的同步操作,并且可以为提高性能而对调用进行批处理。

所以这是我建议您应该做的。您应该input在回调函数中传递新状态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
}

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
}

这有一个严重的缺陷-将字面量obj传递给setState()新状态是不好的,因为它会导致竞争状态
tar

这是react docs的另一句话(自发布您的答案以来可能已更新):“ ...使用componentDidUpdate或setState回调(setState(updater,callback)),保证在更新完成后均能触发已应用”。这对我来说,新状态最明确地反映在回调函数中。
安迪
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.