প্রতিক্রিয়া.জেএস, কোনও ফাংশন ট্রিগার করার আগে সেটস্টেট শেষ হওয়ার জন্য অপেক্ষা করবেন?

Question

এখানে আমার পরিস্থিতি:

• আমি এই.সেটস্টেট () চালাচ্ছি
• এই.হ্যান্ডলফর্মসুবিট () এর ভিতরে, আমি এই কল করছি indফাইন্ডআরটস (); - যা এই.সেটস্টেটের সফল সমাপ্তির উপর নির্ভর করে ()
• this.setState (); এটি শেষ হওয়ার আগেই শেষ হয় না ind
• আমি এই.সেটল স্টোর () এর ভিতরে কীভাবে অপেক্ষা করতে পারি? এই.ফ্যান্ডারউইটস () কল করার আগে এটি শেষ করার জন্য?

একটি সাবপার সমাধান:

• এটি.ফাইন্ডআরউটস () কে উপাদান ডিডআপডেটে () লাগানো হচ্ছে
• এটি গ্রহণযোগ্য নয় কারণ ফাইন্ডআরটস () ফাংশনটি অপ্রাসঙ্গিকভাবে আরও বেশি রাষ্ট্রীয় পরিবর্তন আসবে। অপ্রাসঙ্গিক স্থিতি আপডেট করা হলে আমি সন্ধানের রুটস () ফাংশনটি ট্রিগার করতে চাই না।

দয়া করে নীচে কোড স্নিপেট দেখুন:

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()আপনি এটির জন্য ব্যবহার করতে পারেন এমন একটি alচ্ছিক কলব্যাক প্যারামিটার রয়েছে। আপনাকে কেবল আপনার কোডটি সামান্য পরিবর্তন করতে হবে:

// 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()।
আপনি ()ফাংশনটি পাস করছেন কারণ ছাড়া ।

Comments

অ্যামেজিং! অনেক অনেক ধন্যবাদ

— ম্যালেক্স্যান্ডাররা

এটি প্রতিক্রিয়াশীলে সেটস্টেটের পরে অ্যানিমেটেডভ্যালু পুনরায় সেট করার জন্য দুর্দান্ত কাজ করবে।

— SacWebDeveloper

দুর্দান্ত ~ অনেক ধন্যবাদ

— 強 福

একটি জেনেরিক সংস্করণthis.setState({ name: "myname" }, function() { console.log("setState completed", this.state) })

— সাসি বরুণন

দেখে মনে হচ্ছে আপনি সেটস্টেটে একাধিক কলব্যাক পাস করতে পারবেন না। কলব্যাক শৃঙ্খলিত করার কোনও অ-অদৃশ্য উপায় আছে কি? আসুন বলুন যে আমি 3 টি পদ্ধতি পেয়েছি যা সকলের চালনার দরকার এবং সমস্ত আপডেটের অবস্থা। এটি পরিচালনা করার পছন্দের উপায় কী?

— শান

Answer 2

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

এটি সহায়ক হতে পারে

Answer 3

setState()নতুন রাজ্যের ডক্স অনুসারে কলব্যাক ফাংশনে প্রতিফলিত নাও হতে পারে findRoutes()। প্রতিক্রিয়া দস্তাবেজগুলি থেকে এখানে अर्क :

সেটস্টেট () অবিলম্বে এই.স্টেটকে রূপান্তরিত করে না তবে একটি মুলতুবি স্থিতির রূপান্তর তৈরি করে। এই পদ্ধতিটি কল করার পরে এটি.স্টেট অ্যাক্সেস করা সম্ভাব্যভাবে বিদ্যমান মানটি ফিরিয়ে আনতে পারে।

সেটস্টেটে কলগুলি সিঙ্ক্রোনাস অপারেশনের কোনও গ্যারান্টি নেই এবং কলগুলি পারফরম্যান্স লাভের জন্য ব্যাচ করা যেতে পারে।

সুতরাং এখানে আমি আপনাকে প্রস্তাব করা উচিত। 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
}

Comments

এটির একটি মারাত্মক ত্রুটি রয়েছে - setState()নতুন রাজ্য হিসাবে আক্ষরিক আপত্তি পাস করা ভাল নয় কারণ এটি জাতিগত অবস্থার দিকে পরিচালিত করে

— টার

প্রতিক্রিয়া দস্তাবেজগুলির থেকে এখানে আরও একটি উদ্ধৃতি দেওয়া হয়েছে (যা আপনি আপনার উত্তর পোস্ট করার পরে আপডেট করা হতে পারে): "... উপাদান ডিডআপডেট বা একটি সেটস্টেট কলব্যাক (সেটস্টেট (আপডেটেটর, কলব্যাক)) ব্যবহার করুন, যার একটিতে আপডেট হওয়ার পরে আগুন দেওয়ার নিশ্চয়তা দেওয়া হয়েছে প্রয়োগ করা হয়েছে "। এটি আমাকে বলে যে নতুন রাজ্যটি অবশ্যই কলব্যাক ফাংশনে প্রতিফলিত হয়েছে।

— অ্যান্ডি