সেট স্টেট পদ্ধতির প্রতিক্রিয়া কেন কল করা তাৎক্ষণিকভাবে রাষ্ট্রটিকে রূপান্তরিত করতে পারে না?

Question

আমি ফর্ম বিভাগ পড়ছিreactjsডকুমেন্টেশন এবং onChangeব্যবহার ( জেএসবিআইএন ) প্রদর্শনের জন্য এই কোডটি চেষ্টা করেছেন ।

var React= require('react');

var ControlledForm= React.createClass({
    getInitialState: function() {
        return {
            value: "initial value"
        };
    },

    handleChange: function(event) {
        console.log(this.state.value);
        this.setState({value: event.target.value});
        console.log(this.state.value);

    },

    render: function() {
        return (
            <input type="text" value={this.state.value} onChange={this.handleChange}/>
        );
    }
});

React.render(
    <ControlledForm/>,
  document.getElementById('mount')
);

আমি যখন <input/>ব্রাউজারে মান আপডেট করি , কলব্যাকের console.logভিতরে দ্বিতীয়টি প্রথমটির handleChangeমতোই মুদ্রণ করে , কেন আমি কলব্যাকের সুযোগে ফলাফল দেখতে পাচ্ছি না ?valueconsole.logthis.setState({value: event.target.value})handleChange

Comments

আপনি যদি হুক ব্যবহার করছেন তবে অবিলম্বে পরিবর্তন প্রতিফলিত না করে ব্যবহারের স্টেট সেট পদ্ধতিটি দেখুন ।

— এমিল বার্গারন

Answer 1

প্রতিক্রিয়াটির ডকুমেন্টেশন থেকে :

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

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

this.setState({value: event.target.value}, function () {
    console.log(this.state.value);
});

Comments

ভাল উত্তর. আমার যে পর্যবেক্ষণটি করা দরকার তা হ'ল ভলিংকটি ব্যবহার করার ক্ষেত্রে যত্নশীল। আপনার যদি ইনপুট ফর্ম্যাট / মুখোশ না করতে হয় তবে এটি ভাল কাজ করে।

— ধেরিক

আপনিও চেক আউট করতে চাইতে পারেন componentDidUpdate। রাষ্ট্র পরিবর্তনের পরে এটি ডাকা হবে।

— কীসক্স

দ্রুত প্রশ্ন যদি আমি করতে পারি, আমি একবার দেখতে পেলাম যা আমাদের ফাংশনটি সেটস্টেটে কলব্যাক হিসাবে প্রযোজ্য, আমি আশা করছিলাম যে রেন্ডার () বলার আগে প্রথমে ফানকটি কার্যকর করা হবে। তবে আমি অর্ডারটি সেটস্টেট () -> রেন্ডার () -> সেটস্টেটের কলব্যাক ()। এটা কি স্বাভাবিক? আমরা যদি কলব্যাকের জিনিসগুলির উপর ভিত্তি করে আমাদের রেন্ডারটি নিয়ন্ত্রণ করতে চাই তবে কী হবে? কম্পোনেন্ট আপডেট করা উচিত ?

— সেমুজাবোই

কোনও উপাদানটির স্থিতিস্থাপক পরিবর্তন shouldComponentUpdateঅন্যথায় সুনির্দিষ্টভাবে বর্ণিত আচরণের ব্যবস্থা না করা থাকলে সর্বদা পুনরায় রেন্ডারকে ট্রিগার করে । আপনি যে কলব্যাকটি দিয়ে যাচ্ছেন setStateতা পুনরায় রেন্ডার করার আগে আপনি যা করতে চান তাতে ঠিক কী করার চেষ্টা করছেন ?

— মাইকেল পার্কার

... কেন? কেউ কি এটি ন্যায়সঙ্গত করতে পারেন?

— জ্যাকহাসা কীবোর্ড

Answer 2

প্রতিক্রিয়া ডকুমেন্টেশনে যেমন উল্লেখ করা হয়েছে, সমকালীনভাবে setStateবরখাস্ত হওয়ার কোনও গ্যারান্টি নেই , সুতরাং console.logআপডেট হওয়ার আগে আপনার রাষ্ট্রটি ফিরে আসতে পারে।

মাইকেল পার্কার এর মধ্যে একটি কলব্যাক পাস করার কথা উল্লেখ করেছে setState। রাষ্ট্র পরিবর্তনের পরে যুক্তি পরিচালনা করার আরেকটি উপায় হ'ল componentDidUpdateলাইফসাইकल পদ্ধতিটি যা র্যাক্ট ডক্সে প্রস্তাবিত পদ্ধতি।

সাধারণত আমরা পরিবর্তে এই জাতীয় যুক্তির জন্য কম্পোনেন্টডিডআপডেট () ব্যবহার করার পরামর্শ দিই।

এটি বিশেষত কার্যকর যখন সেখানে ক্রমাগত setStateগুলি চালানো হতে পারে এবং প্রতিটি রাজ্যের পরিবর্তনের পরে আপনি একই ক্রিয়াকলাপটি চালিত করতে চান। প্রত্যেকটিতে একটি কলব্যাক যোগ করার পরিবর্তে setStateআপনি componentDidUpdateপ্রয়োজনে ভিতরে নির্দিষ্ট যুক্তি দিয়ে ফাংশনটি ভিতরে রেখে দিতে পারেন।

// example
componentDidUpdate(prevProps, prevState) {
  if (this.state.value > prevState.value) {
    this.foo();  
  }
}

Answer 3

আপনি ES7 async / অপেক্ষা করার চেষ্টা করতে পারেন। উদাহরণস্বরূপ আপনার উদাহরণ ব্যবহার:

handleChange: async function(event) {
    console.log(this.state.value);
    await this.setState({value: event.target.value});
    console.log(this.state.value);
}

Comments

আপনার উত্তরটি অন্য উচ্চ মানের উত্তর থেকে কীভাবে আলাদা?

— টুডে

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

— কুরোকিরু

আমি যখন কোনও রাজ্য আপডেট করতে চাই এবং তার আপডেট হওয়ার জন্য অপেক্ষা করি তখন আমি যদি সর্বদা অপেক্ষা করে থাকি তবে কি এই প্রভাবটি সম্পাদন করবে? এবং যদি আমি একের অধীনে একটি চেইনে একাধিক প্রত্যাশিত সেটস্টেটগুলি রাখি তবে এটি প্রতিটি সেটস্টেট আপডেটের পরে রেন্ডার করবে? বা শেষ সেটস্টেট আপডেটের পরে?

— ব্যবহারকারী 2774480

setStateঅ্যাসিঙ্ক্রোনাস তবে কিছু ফেরত দেয় না , তাইawait বেশিরভাগ সময় কাজ করবে তবে কেবল সুযোগেই এটি একটি রেস-শর্ত হিসাবে condition

— এমিল বার্গারন

আপনি ব্যবহারকারীকে 2774480 জিজ্ঞাসা করছেন, আমি বিশ্বাস করি কোনটি প্রয়োগ করতে হবে তা নির্ধারণ করার জন্য এটি নির্দিষ্ট ব্যবহারের ক্ষেত্রে নেমে আসে। যদি একাধিক সেটস্টেটগুলি একটি শৃঙ্খলে ব্যবহার করা হয় তবে পারফরম্যান্স প্রভাবিত হবে এবং হ্যাঁ, এটি প্রতিটি সেটস্টেটের পরে রেন্ডার হবে তবে আমি ভুল হলে আমাকে সংশোধন করুন।

— কুড়োকিরু

Answer 4

প্রতিক্রিয়া জীবনচক্র পদ্ধতিগুলি দেখুন！

• http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
• https://reactjs.org/docs/react-component.html

আমি বেশ কয়েক ঘন্টা কাজ করেছিলাম তা খুঁজে বের করার জন্য যেগুলি getDerivedStateFromPropsপরে ডাকা হবে setState()।

😂

Comments

আপনার মন্তব্যটি আমার দিনকে বাঁচিয়েছিল: ডি

— সিএসবা

Answer 5

async-await বাক্য গঠন নিচের মতো কিছু জন্য পুরোপুরি কাজ করে ...

changeStateFunction = () => {
  // Some Worker..

  this.setState((prevState) => ({
  year: funcHandleYear(),
  month: funcHandleMonth()
}));

goNextMonth = async () => {
  await this.changeStateFunction();
  const history = createBrowserHistory();
  history.push(`/calendar?year=${this.state.year}&month=${this.state.month}`);
}

goPrevMonth = async () => {
  await this.changeStateFunction();
  const history = createBrowserHistory();
  history.push(`/calendar?year=${this.state.year}&month=${this.state.month}`);
}

Answer 6

সহজ ভাষায় বলা - this.setState ({ডেটা: মান}) প্রকৃতির এক অবিচ্ছিন্ন প্রকৃতির যার অর্থ এটি কল স্ট্যাকের বাইরে চলে যায় এবং সমাধান না করা হলে কেবল কল স্টকে ফিরে আসে।

জেএসে অ্যাসিনক্রোনাস প্রকৃতি এবং কেন আপডেট হতে সময় লাগে - এই সম্পর্কে একটি পরিষ্কার ছবি পেতে ইভেন্ট লুপ সম্পর্কে পড়ুন

https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4

অতএব -

    this.setState({data:value});
    console.log(this.state.data); // will give undefined or unupdated value

এটি আপডেট করতে সময় লাগে। উপরোক্ত প্রক্রিয়াটি অর্জন করতে -

    this.setState({data:value},function () {
     console.log(this.state.data);
    });