সেট স্টেটের স্থিতি আপডেট করে না

Question

সুতরাং আমি এই আছে:

let total = newDealersDeckTotal.reduce(function(a, b) {
  return a + b;
},
0);

console.log(total, 'tittal'); //outputs correct total
setTimeout(() => {
  this.setState({dealersOverallTotal: total});
}, 10);

console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); //outputs incorrect total

নিউডিলারডেকটোটাল কেবলমাত্র সংখ্যার একটি অ্যারে [1, 5, 9]উদাহরণস্বরূপ this.state.dealersOverallTotalসঠিক সংখ্যাটি দেয় না তবে total? এমনকি এই সমস্যার সমাধান হয়েছে কিনা তা দেখার জন্য আমি একটি সময়সীমা বিলম্বও রেখেছি। কোন স্পষ্ট বা আমি আরও কোড পোস্ট করা উচিত?

Comments

stackoverflow.com/a/36087156/4453045

— আসান

@ আসান চিয়ার্স !!

— কীট

উত্তরে যা বলা হয় তা ছাড়াও, আপনি কল করার আগে আপনি স্পষ্টভাবে রাষ্ট্রের মান লগ করছেন setState।

— ফেলিক্স ক্লিং

@ ফেলিক্সক্লিং না আমি এটি সেট করার পরে এই স্টেট কল করছি । আমি আগে একটি পরিবর্তনশীল লগ করছি। না?

— কীট

সময়সীমা শেষ setStateহওয়ার কারণে আপনি প্রকৃতপক্ষে রাষ্ট্রের লগ ইন করার পরে কার্যকর করা হবে। আমি মনে করি আপনি ডিবাগিংয়ের জন্য যা বোঝাতে চেয়েছিলেন তা console.logসময়সীমার ভিতরে এবং setStateবাইরের অংশটি রেখেছিল ।

— ফ্যাবিয়ান শাল্টজ

Answer 1

setState()সাধারণত অ্যাসিক্রোনাস হয়, যার অর্থ আপনি console.logযখন এই সময় রাষ্ট্র করেন, এটি এখনও আপডেট হয় না। setState()পদ্ধতির কলব্যাকটিতে লগ লাগানোর চেষ্টা করুন । রাষ্ট্র পরিবর্তন সম্পূর্ণ হওয়ার পরে এটি কার্যকর করা হয়:

this.setState({ dealersOverallTotal: total }, () => {
  console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
}); 

Comments

এগুলি ছাড়াও, ওপি স্পষ্টভাবে তারা কল করার আগে রাষ্ট্রীয় মান লগ করে setState।

— ফেলিক্স ক্লিং

এটি আমার পক্ষেও কাজ করে, অতীতে আমি এটি ব্যবহার করেছি: `this.setState ({someVar: newValue}, ফাংশন () {কনসোল.লগ (" ফোর্স আপডেট}); 'তবে কোনও কারণে এটি উদ্বেগজনক ছিল না আর, যখন আমি কোডটি আপডেট করেছিলাম উপরে বর্ণিত হিসাবে এটি কাজ করে

— any

@ জোজকারেরও কাজ করা উচিত, সিনট্যাক্সটি ঠিক ছিল না (প্রথম বন্ধনী অনুপস্থিত):this.setState({someVar: newValue},function(){ console.log("force update") });

— ফ্যাবিয়ান শুল্টজ

imgur.com/Ku0OjTl এই সমস্যা থেকে মুক্তি পেতে আমার কী করা উচিত দয়া করে আমাকে বলুন।

— জেন্সি 1'18

আপনি যদি useStateকার্যকরী উপাদানটিতে হুক ব্যবহার করেন তবে এটি কাজ করে না । useEffectরেন্ডারিংয়ের পরে কোনও প্রভাবের পরিবর্তে ব্যবহার করুন ।

— হাসান শেফা ওজাল্প

Answer 2

সেটস্টেট অ্যাসিক্রোনাস। আপনি আপডেট স্থিতি পেতে কলব্যাক পদ্ধতি ব্যবহার করতে পারেন।

changeHandler(event) {
    this.setState({ yourName: event.target.value }, () => 
    console.log(this.state.yourName));
 }

Answer 3

অ্যাসিঙ্ক ব্যবহার / অপেক্ষা করুন

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

Comments

আমিও তাই করছি। আমার জন্য কাজ করেছেন

— প্রডোব্লাওয়ার

Answer 4

setState()অপারেশন অ্যাসিঙ্ক্রোনাস তাই আপনার console.log()সামনে মৃত্যুদন্ড কার্যকর করা হবে setState()mutates মূল্যবোধ ও অত: পর আপনি ফলাফল দেখতে।

এটি সমাধানের জন্য setState(), এর মতো কলব্যাক ফাংশনে মানটি লগ করুন :

setTimeout(() => {
    this.setState({dealersOverallTotal: total},
    function(){
       console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
    });
}, 10)

Comments

জাভাস্ক্রিপ্ট সবসময় সিঙ্ক্রোনাস।

— সন্তোষ সিং

@ সন্তোষসিংহ আপনার একটি ভুল ধারণা রয়েছে। এপিআই কল, টাইমআউট সবই অ্যাসিঙ্ক্রোনালি ঘটে।

— শুভম খাতরী

আপনি উপরে উল্লিখিত হিসাবে যে জাভাস্ক্রিপ্ট অ্যাসিনক্রোনাস --- এটি সঠিক নয়। এটি মূলত সিঙ্ক্রোনাস এবং কেসগুলির জন্য এটি অ্যাসিনক্রোনাস। stackoverflow.com/questions/2035645/…

— সন্তোষ সিং

@ সন্তোষসিংহ ওহ যে আমার পক্ষ থেকে একটি ভুল ছিল। বাক্যটি সঠিকভাবে গঠন করেনি

— শুভম খাত্রি

পরবর্তী কল করার আগে রাজ্য আপডেট হয়েছে তা নিশ্চিত করতে কলব্যাকের খুব চালাক ব্যবহার!

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

Answer 5

হুকের ক্ষেত্রে আপনার useEffectহুক ব্যবহার করা উচিত ।

const [fruit, setFruit] = useState('');

setFruit('Apple');

useEffect(() => {
  console.log('Fruit', fruit);
}, [fruit])

Comments

দুর্দান্ত, এটি ইউজএফেক্টের সাথে কাজ করে। তবে কেন এটি দরকার?

— alex351

useEffectপ্রতিটি পুনঃ-রেন্ডারে চালিত হয় এবং অ্যারেগুলিতে আইটেমগুলি পাস করা হলে রাষ্ট্রীয় পরিবর্তনশীল বালি পরিবর্তিত হয়। সুতরাং যখন ফলগুলি পরিবর্তিত হবে এবং উপাদানগুলি পুনরায় রেন্ডার করবে, তখন সেই ব্যবহারের প্রভাবটি চলবে।

— সিরাজ আলম

আমি ব্যবহারকারীর বাইরে সেটফ্রুট এবং কনসোল.লগ ফল চালাচ্ছি এবং এটি পরিবর্তন হয় না। : /

— alex351

Answer 6

সেটসেটটি বিক্রিয়ায় অবিচ্ছিন্ন, সুতরাং কনসোলে আপডেট হওয়া অবস্থাটি দেখতে নীচের মত কলব্যাকটি ব্যবহার করতে দেখতে (কলসব্যাক ফাংশন সেটেটেট আপডেটের পরে কার্যকর হবে)

নীচের পদ্ধতিটি "প্রস্তাবিত নয়" তবে বোঝার জন্য, আপনি যদি সরাসরি রাষ্ট্র পরিবর্তন করেন তবে আপনি পরবর্তী লাইনে আপডেট হওয়া রাজ্যটি দেখতে পাবেন। আমি পুনরাবৃত্তি করছি এটি "প্রস্তাবিত নয়"

Comments

ধন্যবাদ এটি আপনার, আপনাকে সরাসরি ভেরিয়েবলটি সেট করতে হবে

— নোটাকর্ন

Answer 7

শুধু যোগ কর componentDidUpdate(){}আপনার কোডটিতে পদ্ধতি এবং এটি কার্যকর হবে। আপনি এখানে প্রতিক্রিয়ার জীবনচক্রটি পরীক্ষা করতে পারেন:

https://images.app.goo.gl/BVRAi4ea2P4LchqJ8

Answer 8

একাধিকবার প্রতিক্রিয়া স্থিতি সেট করার সময় আমার একটি সমস্যা ছিল (এটি সর্বদা ডিফল্ট অবস্থার ব্যবহার করে)। এই প্রতিক্রিয়া / গিথুব ইস্যুটি আমার পক্ষে কাজ করেছে

const [state, setState] = useState({
  foo: "abc",
  bar: 123
});

// Do this!
setState(prevState => {
  return {
    ...prevState,
    foo: "def"
  };
});
setState(prevState => {
  return {
    ...prevState,
    bar: 456
  };
});

Answer 9

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

আমার সমস্যাটি হ'ল setStateকলব্যাক ফানক থেকে ঘটছে যা উপাদানগুলির মধ্যে একটি দ্বারা জারি করা হয়েছিল। এবং আমার সন্দেহজনক যে কলটি সুসংগতভাবে ঘটছিল, যা প্রতিরোধ করেছিলsetState রাষ্ট্র সেট করা থেকে ।

সোজা কথায় আমার কাছে এমন কিছু রয়েছে:

render() {
    <Control
        ref={_ => this.control = _}
        onChange={this.handleChange}
        onUpdated={this.handleUpdate} />
}

handleChange() {
    this.control.doUpdate();
}

handleUpdate() {
    this.setState({...});
}

আমাকে যেভাবে "ফিক্স" করতে হয়েছিল তা এইভাবে স্থাপন doUpdate()করা হয়েছিল setTimeout:

handleChange() {
    setTimeout(() => { this.control.doUpdate(); }, 10);
}

আদর্শ নয়, তবে অন্যথায় এটি একটি উল্লেখযোগ্য রিফ্যাক্টরিং হবে।