प्रतिक्रिया जेएस: पिछले इनपुट पर सेटस्टेट देर हो चुकी है

Question

मुझे खेद है, अगर मैं अपनी समस्या को ठीक से समझा नहीं सकता क्योंकि अंग्रेजी मेरी मुख्य भाषा नहीं है।

मैं इस तरह (ES6 में लिखा) कुछ एक फार्म घटक बनाने के लिए:

class Form extends React.Component { 
    constructor(...args) { 
    super(args); 
    this.state = { input: '' }; 
    } 

    render() { 
    return (
     <form> 
     <input 
      type="text" 
      onChange={this.onInputChange.bind(this)} 
     /> 
     </form> 
    ); 
    } 

    onInputChange(e) { 
    this.setState({ input: e.target.value }); 
    console.log(`state: ${this.state}, value: ${e.target.value}`); // this is my checking 
    } 
} 

आप लाइन जहां मैं console.log करते देखा है? अब, जब मैं ब्राउज़र पर कुछ टाइप करने के लिए प्रयास करें:

// I type this: my word 
// on every character input, the output is: 

// state: , value: m 
// state: m, value: my 
// state: my, value: my 
// state: my , value: my w 
// state: my w, value: my wo 
// state: my wo, value: my wor 
// state: my wor, value: my word 

// I do backspace 
// state: my word, value: my wor 
// state: my wor, value: my wo 
// state: my wo, value: my w 
// state: my w, value: my 
// state: my , value: my 
// state: my, value: m 
// state: m, value: 

देखते हैं? प्रत्येक इनपुट पर राज्य देर से एक चरित्र है। यह इनपुट लंबाई को मान्य करने के लिए अच्छा नहीं है। मैंने वहां क्या गलत किया? या, क्या मुझे कुछ याद आया?

Answer 1

setState विधि पर कॉलबैक का उपयोग करें।

onInputChange(e) { 
    this.setState({ input: e.target.value },() => { 
     console.log(`state: ${this.state}, value: ${e.target.value}`); 
    }); 
} 

docs से

:

दूसरा (वैकल्पिक) पैरामीटर कॉलबैक फ़ंक्शन एक बार setState पूरा हो गया है मार डाला और घटक फिर से प्रदान की गई है हो जाएगा कि है।

Answer 2

setState तुरंत this.state उत्परिवर्तित नहीं है।, आप एक दूसरा तर्क के रूप में setState कॉलबैक करने के लिए गुजरती हैं और अद्यतन राज्य

onInputChange(e) { 
    this.setState({ input: e.target.value },() => { 
    console.log(`state: ${this.state}, value: ${e.target.value}`); // this is my checking 
    }); 
} 

Example

Answer 3

ऐसा इसलिए हुआ क्योंकि console.log इस से पहले भी शुरू कर दिया प्राप्त कर सकते हैं .setState ने अपनी क्रिया पूरी की। कॉलबैक में आपको console.log को पास करने की आवश्यकता है ताकि यह सुनिश्चित किया जा सके कि इसे केवल इसके बाद ही कहा जाता है .सेटस्टेट पूर्ण हो जाता है।

onInputChange(e) { 
    this.setState({ input: e.target.value },() => { 
    console.log(`state: ${this.state}, value: ${e.target.value}`); // the console message code 
    }); 
}