রিস্ট্যাক সেটস্টেট কলব্যাক কখন ব্যবহার করবেন

Question

যখন একটি প্রতিক্রিয়া উপাদান উপাদান পরিবর্তন হয়, রেন্ডার পদ্ধতি বলা হয়। সুতরাং যে কোনও রাজ্যের পরিবর্তনের জন্য, রেন্ডার পদ্ধতিগুলির শরীরে একটি ক্রিয়া সম্পাদন করা যেতে পারে। সেটস্টেট কলব্যাকের জন্য কি তখন কোনও বিশেষ ব্যবহারের মামলা আছে?

Comments

আপনি কী জিজ্ঞাসা করছেন তা বর্তমানে অস্পষ্ট। আপনি কিছু কোড অন্তর্ভুক্ত করতে পারেন?

— ডেভিন ট্রায়ন

রাজ্য ডিফাইনটিবেল পরিবর্তন হওয়ার পরে আপনি যা কিছু করতে চান সেটস্টেট কলব্যাক। যেহেতু সেটস্টেটটি অ্যাসিঙ্ক, আপনি যদি কোনও এফএক্স কল করতে এবং নতুন রাজ্যটি লোড হওয়ার বিষয়টি নিশ্চিত করতে চান তবে

— কলব্যাকটি সেইটাই

সেটস্টেট কলব্যাকের জন্য ব্যবহারের বিষয়টিটি বেশ পরিষ্কার। আপনি একটি স্পেসিফিক রাষ্ট্র আপডেট হওয়ার পরে কোনও ফাংশন চলতে চাইলে এটি ব্যবহার করুন। render()পরিবর্তে আপনি যদি এই ফাংশনটি রাখেন তবে এটি প্রতিবার যে কোনও রাষ্ট্র আপডেট হওয়ার পরে চলবে, যা সম্ভবত আপনি চান না। এটি আপনার কোডকে কম পঠনযোগ্য এবং যৌক্তিক করে তুলবে।

— এম

Answer 1

হ্যাঁ আছে, যেহেতু setStateএকটি asynchronousউপায়ে কাজ করে । তার মানে ভেরিয়েবল কল setStateকরার পরে this.stateঅবিলম্বে পরিবর্তন হয় না। সুতরাং আপনি যদি কোনও রাষ্ট্রের পরিবর্তনশীল স্থিতির স্থিতির পরে তত্ক্ষণাত কোনও ক্রিয়া সম্পাদন করতে চান এবং ফলাফলটি ফিরিয়ে দিতে চান, একটি কলব্যাক কার্যকর হবে

নীচের উদাহরণ বিবেচনা করুন

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value });
  this.validateTitle();
},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

উপরের কোডটি প্রত্যাশার মতো কাজ titleকরতে পারে না কারণ বৈধতাটি বৈধকরণের আগে এটির পরিবর্তিত হতে পারে না। এখন আপনি ভাবতে পারেন যে আমরা render()ফাংশনটিতেই বৈধতাটি সম্পাদন করতে পারি তবে এটি আরও ভাল এবং একটি ক্লিনার উপায় হ'ল যদি আমরা এটি চেঞ্জিটল ফাংশনটিতে নিজে পরিচালনা করতে পারি যেহেতু এটি আপনার কোডকে আরও সুসংহত এবং বোধগম্য করে তুলবে

এই ক্ষেত্রে কলব্যাক দরকারী useful

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value }, function() {
    this.validateTitle();
  });

},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

আর একটি উদাহরণ হ'ল আপনি যখন চান dispatchএবং পদক্ষেপের সাথে সাথে রাষ্ট্র পরিবর্তন হয়। আপনি এটি একটি কলব্যাকে করতে চাইবেন না এবং এটি render()যেমন প্রতিবারের পুনরায় রেন্ডারিং ঘটে তাকে বলা হবে না এবং তাই কলব্যাকের প্রয়োজন এমন অনেকগুলি পরিস্থিতি সম্ভব।

আর একটি মামলা হ'ল ক API Call

একটি কেস উদ্ভূত হতে পারে যখন আপনাকে কোনও নির্দিষ্ট রাষ্ট্রের পরিবর্তনের উপর ভিত্তি করে কোনও এপিআই কল করা দরকার, আপনি যদি রেন্ডার পদ্ধতিতে করেন তবে এটি প্রতিটি রেন্ডার onStateপরিবর্তনের জন্য আহ্বান জানানো হবে বা কিছু প্রোপ Child Componentপরিবর্তিত হয়ে গেছে।

এই ক্ষেত্রে আপনি setState callbackAPI কলটিতে আপডেট হওয়া রাষ্ট্রীয় মানটি পাস করতে একটি ব্যবহার করতে চান

....
changeTitle: function (event) {
  this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
  // Call API with the updated value
}
....

Comments

আমি বুঝতে পারি যে এটি প্রকৃতির অ্যাসিনক্রোনাস। আমার প্রশ্ন ছিল হয় কিছু নির্দিষ্ট যে শুধুমাত্র setState কলব্যাক যে জন্য ব্যবহার করা যেতে পারে সম্ভবত সমর্থন নাও করতে পারে রেন্ডার পদ্ধতি শরীর (এলইটি এর থেকে পৃথক্ কিছু বলতে ভাল কোড পাঠযোগ্যতা।)

— সাহিল জৈন

@ সাহিলজইন যাচাইকরণ সঠিক উদাহরণ, আপনি এটি রেন্ডার () ফাংশনে পরিচালনা করতে চান না কারণ যখনই আপনি রেন্ডারে কোনও পরিবর্তন করেন তখন এটি বলা হবে () আপনি কেবল তখনই কল করতে চান যখন কেবল ইনপুট পরিবর্তন হয় এবং তাই ফাংশনে নিজেই

— শুভম খাতরী

প্রতিক্রিয়া রেন্ডারের সময় রাষ্ট্র পরিবর্তন করতে নিষেধ করে .. সুতরাং কলব্যাকের মধ্যে বৈধতা দেওয়ার অধিকার right

— ওয়েবদেব

if (this.title.length === 0) {হওয়া উচিত this.state.title.length, ঠিক?

— দিমিত্রি মিনকভস্কি

প্রথম ব্যবহারের ক্ষেত্রে সম্ভবত একটি ভাল ধারণা নয়। পুনঃ-রেন্ডারের পরে সেটস্টেট কলব্যাকগুলি ট্রিগার করে, তাই আপনি কোনও অকারণে ডাবল রেন্ডার সৃষ্টি করছেন। এটি হ'ল ফাংশন আর্গুমেন্ট (আপডেটকারী) এর উদ্দেশ্য। আপনি কেবল চালাতে পারেন setState(state => state.title.length ? { titleError: "Title can't be blank" } : null)এবং পরিবর্তনটি স্ট্যাক করবে। কোনও ডাবল রেন্ডার দরকার নেই।

— আর এসমান্ড

Answer 2

this.setState({
    name:'value' 
},() => {
    console.log(this.state.name);
});

Comments

এই কোড স্নিপেটের জন্য আপনাকে ধন্যবাদ, যা কিছু সীমিত, তাত্ক্ষণিক সহায়তা সরবরাহ করতে পারে। একটি সঠিক ব্যাখ্যা কেন এটি সমস্যার একটি ভাল সমাধান তা দেখিয়ে তার দীর্ঘমেয়াদী মানকে ব্যাপকভাবে উন্নত করবে এবং ভবিষ্যতে পাঠকদের আরও অন্যান্য অনুরূপ প্রশ্নের সাথে আরও দরকারী করে তুলবে। আপনার অনুমানগুলি সহ কিছু ব্যাখ্যা যুক্ত করতে দয়া করে আপনার উত্তরটি সম্পাদনা করুন।

— মাচাভিটি

রাষ্ট্র পরিবর্তন হওয়ার পরে আপনি যখন কোনও ফাংশন কল করতে চান আপনি এই পদ্ধতিটি ব্যবহার করতে পারেন।

— আরজ বাবাইভ

আপনি যদি একাধিক রাজ্যের নাম, প্রথম নাম ইত্যাদি সেট করতে চান?

— সুমন্ত ভারদা

Answer 3

আমার মনে যে ১ টি ইউসকেস আসে, এটি একটি apiকল, যা রেন্ডারে যাওয়া উচিত নয়, কারণ এটি eachরাষ্ট্রের পরিবর্তনের জন্য পরিচালিত হবে । এবং এপিআই কলটি কেবলমাত্র বিশেষ রাজ্যের পরিবর্তনে করা উচিত, এবং প্রতিটি রেন্ডারে নয়।

changeSearchParams = (params) => {
  this.setState({ params }, this.performSearch)
} 

performSearch = () => {
  API.search(this.state.params, (result) => {
    this.setState({ result })
  });
}

সুতরাং যে কোনও রাজ্যের পরিবর্তনের জন্য, রেন্ডার পদ্ধতিগুলির শরীরে একটি ক্রিয়া সম্পাদন করা যেতে পারে।

খুব খারাপ অনুশীলন , কারণ- renderআদর্শটি শুদ্ধ হওয়া উচিত, এর অর্থ কোনও ক্রিয়াকলাপ, রাষ্ট্র পরিবর্তন, এপিআই কলগুলি করা উচিত নয়, কেবল আপনার দৃষ্টিভঙ্গিটি মিশ্রণ করুন এবং এটি ফিরিয়ে দিন। কিছু ইভেন্টগুলিতে অ্যাকশনগুলি সম্পাদন করা উচিত। রেন্ডার কোনও ইভেন্ট নয়, componentDidMountউদাহরণস্বরূপ।

Answer 4

সেটস্টেট কল বিবেচনা করুন

this.setState({ counter: this.state.counter + 1 })

ধারণা

সেটস্টেট অ্যাসিঙ্ক ফাংশনে ডাকা হতে পারে

সুতরাং আপনি নির্ভর করতে পারবেন না this। যদি উপরোক্ত কলটি একটি অ্যাসিঙ্ক ফাংশনটির ভিতরে করা হয়েছিল তখন thisসেই সময়ে উপাদানটির অবস্থা উল্লেখ করবে তবে আমরা আশা করেছি যে এটি সেট স্টেট কলিং বা এসিঙ্ক কার্যের সূচনাকালীন সময়ে রাষ্ট্রের অভ্যন্তরের সম্পত্তির উল্লেখ করবে। এবং কার্য হিসাবে async কল ছিল সুতরাং সম্পত্তি সম্পত্তি সময়ের পরিবর্তিত হতে পারে। সুতরাং এটি ব্যবহার করা অবিশ্বাস্যthisরাজ্যের কিছু সম্পত্তি উল্লেখ কীওয়ার্ডটি এইভাবে আমরা কলব্যাক ফাংশনটি ব্যবহার করি যার যুক্তিগুলি পূর্ববর্তী স্টেট এবং প্রপস যার অর্থ এসিঙ্ক টাস্কটি কখন হয়েছিল এবং সেটস্টেট কল প্রিস্টস্টেট ব্যবহার করে স্টেট আপডেট করার সময় ছিল এখন সেট স্টেট স্টেটের সাথে যুক্ত হবে এখনও শুরু হয়নি। নির্ভরযোগ্যতা নিশ্চিত করা যে নেক্সটস্টেটি দূষিত হবে না।

ভুল কোড: ডেটা দুর্নীতিতে পরিচালিত করবে

this.setState(
   {counter:this.state.counter+1}
 );

কলস্টে ফাংশন থাকার সাথে সেটস্টেট সহ সঠিক কোড:

 this.setState(
       (prevState,props)=>{
           return {counter:prevState.counter+1};
        }
    );

সুতরাং যখনই আমাদের এখনকার সম্পত্তির মালিকানাধীন মানের উপর ভিত্তি করে আমাদের বর্তমান অবস্থাটি পরবর্তী রাজ্যে আপডেট করতে হবে এবং এটি সমস্তই অ্যাসিঙ্ক ফ্যাশনে ঘটছে এটি সেটস্টেটকে কলব্যাক ফাংশন হিসাবে ব্যবহার করা ভাল ধারণা।

আমি কোড কোডে এখানে ব্যাখ্যা করার চেষ্টা করেছি কোড পেন