reactjs - সেটস্টেট প্রতিক্রিয়া অবিলম্বে আপডেট করা হয় না




redux state (6)

আমি একটি টুডো অ্যাপ্লিকেশন নিয়ে কাজ করছি। এটি আপত্তিজনক কোডটির একটি খুব সরলিকৃত সংস্করণ। আমার একটি চেকবাক্স রয়েছে:

 <p><input type="checkbox"  name="area" checked={this.state.Pencil}   onChange={this.checkPencil}/> Writing Item </p>

চেকবক্সটি কল করে এমন ফাংশনটি এখানে:

checkPencil(){
   this.setState({
      pencil:!this.state.pencil,
  }); 
  this.props.updateItem(this.state);
}

আপডেট আইটেম এমন একটি ফাংশন যা রিডেক্সে প্রেরণের জন্য ম্যাপযুক্ত

function mapDispatchToProps(dispatch){
  return bindActionCreators({ updateItem}, dispatch);
}

আমার সমস্যাটি হ'ল আমি যখন আপডেট আইটেম অ্যাকশনটি কল করি এবং রাষ্ট্রটিকে কনসোল.লগ করি তখন এটি সর্বদা 1 ধাপ পিছনে থাকে। যদি চেকবাক্সটি চেক করা না থাকে এবং সত্য না হয় তবে আমি আপডেট আইটেম ফাংশনটিতে সত্যের পাসের অবস্থাটি পাই। রাষ্ট্র আপডেট করতে বাধ্য করার জন্য আমাকে কি অন্য ফাংশন কল করার দরকার আছে?


আপনার দ্বিতীয় ফাংশনটি সেটস্টেটে কলব্যাক হিসাবে আহ্বান করা উচিত, যেমন সেটস্টেট অ্যাসিঙ্ক্রোনালি ঘটে। কিছুটা এইরকম:

this.setState({pencil:!this.state.pencil}, myFunction)

তবে আপনার ক্ষেত্রে যেহেতু আপনি সেই ফাংশনটি একটি প্যারামিটারের সাথে কল করতে চান তাই আপনাকে আরও কিছুটা সৃজনশীল পেতে হবে এবং সম্ভবত আপনার নিজস্ব ফাংশন তৈরি করতে হবে যা প্রপসগুলিতে ফাংশনটি কল করে:

myFunction = () => {
  this.props.updateItem(this.state)
}

তাদের একত্রিত করুন এবং এটি কাজ করা উচিত।


আপনি যখন বর্তমান রাষ্ট্রের সম্পত্তি ব্যবহার করে আপনার রাষ্ট্র আপডেট করছেন, তখন প্রতিক্রিয়াযুক্ত ডকুমেন্টেশন আপনাকে setState পরিবর্তে setState ফাংশন কল সংস্করণটি ব্যবহার করার পরামর্শ দেয়।

সুতরাং setState((state, props) => {...}) setState(object) পরিবর্তে setState((state, props) => {...})

কারণ হ'ল setState হ'ল তাত্ক্ষণিক পরিবর্তনের পরিবর্তে রাষ্ট্রের পরিবর্তনের অনুরোধ। কার্যকারিতা উন্নতির জন্য সেই setState কলগুলির প্রতিক্রিয়া জানায়।

অর্থ আপনি যে রাষ্ট্রীয় সম্পত্তিটি পরীক্ষা করছেন তা স্থিতিশীল নাও হতে পারে। সচেতন হওয়ার এটি একটি সম্ভাব্য সমস্যা pit

আরও তথ্যের জন্য এখানে ডকুমেন্টেশন দেখুন: https://facebook.github.io/react/docs/react-component.html#setstate

আপনার প্রশ্নের উত্তর দিতে, আমি এটি করব।

checkPencil(){
    this.setState((prevState) => {
        return {
            pencil: !prevState.pencil
        };
    }, () => {
        this.props.updateItem(this.state)
    });
}

এটা চেষ্টা কর

this.setState({inputvalue: e.target.value}, function () {
    console.log(this.state.inputvalue);
    this.showInputError(inputs[0].name);
}); 

কোনও ফর্ম ব্যবহার করে বৈধতার জন্য showInputError ফাংশন


এর কারণ এটি অবিচ্ছিন্নভাবে ঘটে থাকে, সুতরাং সেই সময়ের অর্থ সম্ভবত এখনও আপডেট না হয় ...

প্রতিক্রিয়া v.16 ডকুমেন্টেশন অনুসারে, আপনার setState() এর দ্বিতীয় ফর্মটি ব্যবহার করা দরকার যা কোনও বস্তুর পরিবর্তে কোনও ফাংশন গ্রহণ করে:

রাষ্ট্রীয় আপডেটগুলি অ্যাসিক্রোনাস হতে পারে

প্রতিক্রিয়া পারফরম্যান্সের জন্য একক আপডেটে একাধিক সেটস্টেট () কলকে ব্যাচ করতে পারে।

কারণ এই.পৃষ্ঠা এবং এটি.সেটটি অবিচ্ছিন্নভাবে আপডেট করা হতে পারে, আপনার পরবর্তী অবস্থার গণনার জন্য তাদের মানগুলিতে নির্ভর করা উচিত নয়।

উদাহরণস্বরূপ, এই কোডটি কাউন্টারটি আপডেট করতে ব্যর্থ হতে পারে:

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

এটি ঠিক করতে, সেটস্টেটের দ্বিতীয় ফর্মটি ব্যবহার করুন () যা কোনও বস্তুর পরিবর্তে কোনও ফাংশন গ্রহণ করে। এই ফাংশনটি প্রথম যুক্তি হিসাবে পূর্বের অবস্থাটি গ্রহণ করবে এবং আপডেটটি দ্বিতীয় আর্গুমেন্ট হিসাবে প্রয়োগ করার সময় প্রপস:

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

প্রতিক্রিয়াতে setState() কল করা setState() , বিভিন্ন কারণে (মূলত পারফরম্যান্স)। কভারগুলির আওতায় রিঅ্যাক্ট setState() কে একক রাষ্ট্রের রূপান্তরিত করতে একাধিক কলগুলি ব্যাচ করবে এবং তারপরে প্রতিটি রাজ্যের পরিবর্তনের জন্য পুনরায় রেন্ডারিংয়ের পরিবর্তে উপাদানটিকে setState() পুনরায় সরবরাহ করবে।

ভাগ্যক্রমে, সমাধানটি বরং সহজ - setState কলব্যাক প্যারামিটার গ্রহণ করে:

checkPencil(){
   this.setState({
      pencil:!this.state.pencil,
  }, function () {
      this.props.updateItem(this.state);
  }.bind(this));
}

প্রথমে আপনার মান সেট করুন। আপনার কাজ এগিয়ে যাওয়ার পরে।

this.setState({inputvalue: e.target.value}, function () {
    this._handleSubmit();
}); 

_handleSubmit() {
   console.log(this.state.inputvalue);
   //Do your action
}




setstate