प्रतिक्रिया के #setState के अंदर फ़ंक्शन का उपयोग क्यों एसिंक मुद्दों को हल करता है?

Question

docs से, यह कहता है "प्रतिक्रिया कई सेटस्टेट() कॉल को प्रदर्शन के लिए एक ही अद्यतन में बैच कर सकती है" इसलिए यह setState के तर्क के लिए किसी ऑब्जेक्ट के बजाय फ़ंक्शन का उपयोग करने की अनुशंसा करता है। यह समस्या को कैसे हल करता है?

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

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

Answer 1

जब आप setState को एक वस्तु में पारित, प्रतिक्रिया जो कुछ भी आप में पास ले, एक घटना को ट्रैक कि क्या में पारित किया गया था, और फिर अंत में राज्य अपडेट करेगा पैदा करेगा। चूंकि दस्तावेज़ कहते हैं, यदि एकाधिक सेटस्टेट चलाए जाते हैं, तो प्रतिक्रिया उन लोगों को बैच कर सकती है और चूंकि यह असीमित रूप से होने जा रहा है, जब आप पहले उदाहरण को चलाते हैं, तो यह this.state.counter का उपयोग कर सकता है जो वास्तव में पुराना है और अप्रत्याशित दुष्प्रभाव।

दूसरा विकल्प अधिक सुरक्षित माना जाता है क्योंकि यह एक वादे की तरह है: जब आप किसी फ़ंक्शन में जाते हैं, तो प्रतिक्रिया वास्तव में अपडेट होने के बाद ही इस फ़ंक्शन को चलाएगी। यह सुनिश्चित करता है कि आपके पास वैरिएबल सही है जब आप prevState वेरिएबल का उपयोग कर अद्यतन करते हैं तो वे कॉलबैक के लिए तर्क के रूप में प्रदान करते हैं।

मैंने पहली विधि का उपयोग करके किसी मुद्दे में भाग नहीं लिया है, लेकिन मैंने सेटस्टेट कॉल के समूह को बाढ़ करने की भी कोशिश नहीं की है, जो मुझे यकीन है कि यह कब आता है। इस दुष्ट लोगों को मैंने देखा है कि मुख्य तरीका यह है कि जब वे राज्य स्थापित करने के बाद नए राज्य का उपयोग करने की कोशिश कर रहे हैं।

उदाहरण के लिए

:

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

// this will more then likely be the previous value 
// as setState does not run right away, but asynchronously 
this.useNewCounter(this.state.counter) 
} 

कि उदाहरण में

एक है कि जब useNewCounter कहा जाता है कि यह नवीनतम राज्य का उपयोग किया जाएगा उम्मीद कर सकते हैं, लेकिन यह, संदर्भ अभी भी पिछले मान तक की दिशा में रखे हो जाएगा नहीं होगा इस विधि को कॉल करने के बाद कुछ बिंदु पर राज्य को अद्यतन प्रतिक्रिया दें।