3 शुरुआती रिएक्ट गलतियाँ जो आपके ऐप को बर्बाद कर सकती हैं

एक रिएक्ट डेवलपर के रूप में, आप फ्रेमवर्क के साथ कोडिंग करते समय कुछ गलतियाँ करने के लिए बाध्य हैं। इनमें से कुछ गलतियां काफी सामान्य हैं। और उनकी सूक्ष्म प्रकृति के कारण, आपको अपने एप्लिकेशन को डीबग करने के लिए इन समस्याओं को पहचानना मुश्किल हो सकता है।

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

1. कॉलबैक फ़ंक्शन के गलत प्रकार का उपयोग करना

इवेंट हैंडलिंग रिएक्ट में एक सामान्य अभ्यास है जावास्क्रिप्ट की शक्तिशाली घटना-सुनने की कार्यक्षमता. हो सकता है कि आप किसी बटन पर मँडराते समय उसका रंग बदलना चाहें। शायद आप सबमिट करने पर सर्वर को फॉर्म डेटा भेजना चाहते हैं। इन दोनों परिदृश्यों में, वांछित प्रतिक्रिया करने के लिए आपको ईवेंट में कॉलबैक फ़ंक्शन पास करना होगा। यहीं पर कुछ रिएक्ट डेवलपर्स गलतियाँ करते हैं।

निम्नलिखित घटक पर विचार करें, उदाहरण के लिए:

निर्यातगलती करनासमारोहअनुप्रयोग() {
समारोहहैंडल सबमिट करें(इ) {
 e.preventDefault ()
सांत्वना देना।लकड़ी का लट्ठा("फ़ॉर्म सबमिट किया गया!")
 }
समारोहछपाई(संख्या) {
सांत्वना देना।लकड़ी का लट्ठा("प्रिंट", संख्या)
 }
समारोहडबलर(संख्या) {
वापस करना() => {
सांत्वना देना।लकड़ी का लट्ठा("दोहरा", संख्या * 2)
 }
 }
वापस करना (
 <>
 {/* कोड यहां जाएगा */}
 </>
 )
}

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

अब, JSX पर चलते हुए, सबसे पहले और सबसे सामान्य तरीके से शुरू करते हैं जिससे आप एक ईवेंट हैंडलर के रूप में एक फ़ंक्शन पास करेंगे:

<प्रपत्रऑनसबमिट={हैंडलसबमिट}>
<इनपुटप्रकार="मूलपाठ"नाम="मूलपाठ"डिफ़ॉल्ट मान="प्रारंभिक"/>
<बटन>जमा करनाबटन>
प्रपत्र>

यह उदाहरण ऑनसबमिट प्रोप के माध्यम से फ़ंक्शन के नाम को इवेंट में पास करता है, इसलिए जब आप फॉर्म सबमिट करते हैं तो रिएक्ट हैंडल को कॉल करता है। हैंडल के अंदर सबमिट करें, आप ईवेंट ऑब्जेक्ट तक पहुंच सकते हैं, जो आपको गुणों तक पहुंच प्रदान करता है घटना लक्ष्य मूल्य और तरीके जैसे घटना.रोकथाम ().

इवेंट हैंडलर फ़ंक्शन को पास करने का दूसरा तरीका इसे कॉलबैक फ़ंक्शन के अंदर कॉल करना है। अनिवार्य रूप से, आप एक फ़ंक्शन पर क्लिक कर रहे हैं जो आपके लिए प्रिंट() को कॉल करता है:

{[1, 5, 7]।नक्शा((संख्या) => {
वापस करना (
 प्रिंट (संख्या)}>
 प्रिंट {संख्या}
 </button>
 )
})}

यह विधि उन परिदृश्यों में उपयोगी है जहाँ आप स्थानीय डेटा को फ़ंक्शन में पास करना चाहते हैं। उपरोक्त उदाहरण प्रत्येक संख्या को प्रिंट () फ़ंक्शन में पास करता है। यदि आपने पहली विधि का उपयोग किया है, तो आप फ़ंक्शन में तर्क पारित नहीं कर पाएंगे।

तीसरा तरीका वह है जहां बहुत सारे डेवलपर बहुत सारी गलतियाँ करते हैं। याद रखें कि डबलर फ़ंक्शन एक और फ़ंक्शन लौटाता है:

समारोहडबलर(संख्या) {
वापस करना() => {
सांत्वना देना।लकड़ी का लट्ठा("दोहरा", संख्या * 2)
 }
}

अब अगर आपने इसे जेएसएक्स में इस्तेमाल किया है:

{[1, 5, 7]।नक्शा((संख्या) => {
वापस करना (
 डबलर (संख्या)}>
 दोहरा {संख्या}
 </button>
 )
})}

इस मामले में, आप जिस फ़ंक्शन से वापस आते हैं दोहरा() वह है जो ऑनक्लिक को असाइन किया जाता है। यह अनिवार्य रूप से लौटाए गए फ़ंक्शन की प्रतिलिपि बनाने और ऑनक्लिक में इनलाइन चिपकाने जैसा ही है। इस अंतिम विधि का कोई उपयोग मामला नहीं है। ज्यादातर बार, आप फ़ंक्शन को एक चर (पहली विधि) के रूप में जोड़ने या कॉलबैक (दूसरी विधि) के अंदर फ़ंक्शन को कॉल करने से बेहतर होते हैं।

सभी तीन तकनीकें मान्य हैं क्योंकि, सभी मामलों में, आप ईवेंट के लिए फ़ंक्शन पास कर रहे हैं। रिएक्ट में, आपको यह सुनिश्चित करने की आवश्यकता है कि आप किसी ईवेंट प्रॉपर्टी में फ़ंक्शन पास करते हैं। यह एक चर, एक हार्ड-कोडेड फ़ंक्शन (इनलाइन), या एक ऑब्जेक्ट/फ़ंक्शन हो सकता है जो अन्य फ़ंक्शन देता है।

2. एक झूठी जांच के दौरान शून्य आउटपुट करना

तुम कब हो सशर्त रूप से रिएक्ट में एक तत्व का प्रतिपादन, आप if...else स्टेटमेंट या शॉर्ट-सर्किटिंग तकनीक का उपयोग कर सकते हैं। शॉर्ट सर्किटिंग में डबल एम्परसेंड (&&) का उपयोग शामिल है। यदि एम्परसेंड से पहले की स्थिति सत्य का मूल्यांकन करती है, तो ब्राउजर एम्परसेंड के बाद कोड चलाता है। यदि नहीं, तो ब्राउज़र कोई कोड निष्पादित नहीं करता है।

शॉर्ट-सर्किटिंग अपने संक्षिप्त सिंटैक्स के लिए बेहतर तकनीक है, लेकिन यह एक साइड इफेक्ट के साथ आता है जिसे कई डेवलपर्स नोटिस करने में विफल रहते हैं। यह गलती ठीक से समझ में नहीं आने के कारण होती है कि JSX झूठे मूल्यों के साथ कैसे काम करता है।

निम्नलिखित कोड पर विचार करें:

निर्यातगलती करनासमारोहअनुप्रयोग() {
कॉन्स्ट सरणी = [1, 2, 3, 4]
वापस करना (


 {array.length && (


सरणी आइटम:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

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

उसका कारण यह है सरणी लंबाई शून्य लौटाता है। जावास्क्रिप्ट में मान शून्य गलत है। और समस्या यह है कि JSX स्क्रीन पर शून्य प्रदर्शित करता है। अन्य मिथ्या मान जैसे अशक्त, असत्य और अपरिभाषित का प्रतिपादन नहीं किया जाता है। इससे खराब उपयोगकर्ता अनुभव हो सकता है क्योंकि पृष्ठ पर हमेशा शून्य दिखाई देगा। कभी-कभी शून्य इतना छोटा होता है कि आपको पता ही नहीं चलता।

समाधान यह सुनिश्चित करना है कि केवल अशक्त, अपरिभाषित या गलत लौटाया जाए। आप झूठे मूल्य पर भरोसा करने के बजाय स्थिति में स्पष्ट रूप से शून्य की जाँच करके ऐसा करते हैं:

निर्यातगलती करनासमारोहअनुप्रयोग() {
कॉन्स्ट सरणी = [1, 2, 3, 4]
वापस करना (


 {array.length!== 0 && (


सरणी आइटम:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

अब ऐरे के खाली होने पर भी वैल्यू जीरो स्क्रीन पर नहीं दिखेगी।

3. राज्य को ठीक से अद्यतन करने में विफल

जब आप किसी रिएक्ट घटक में स्थिति को अपडेट कर रहे हैं, तो आपको किसी भी अवांछित दुष्प्रभाव से बचने के लिए इसे ठीक से करने की आवश्यकता है। सबसे खराब गलतियाँ वे हैं जो आपके लिए कोई त्रुटि नहीं फेंकती हैं। वे डिबग करना और यह पता लगाना कठिन बनाते हैं कि समस्या क्या है। खराब स्थिति के अद्यतनों का वह प्रभाव होता है।

जब आप मौजूदा स्थिति का उपयोग कर रहे हों तो यह गलती समझ में नहीं आती है कि राज्य को कैसे अपडेट किया जाए। उदाहरण के लिए निम्नलिखित कोड पर विचार करें:

निर्यातगलती करनासमारोहअनुप्रयोग() {
कॉन्स्ट [सरणी, सेटअरे] = उपयोगस्टेट ([1, 2, 3])
समारोहaddNumberToStart() {
 ऐरे.अनशिफ्ट (संख्या)
 सेटअरे (सरणी)
 }
समारोहaddNumberToEnd() {
 ऐरे.अनशिफ्ट (संख्या)
 सेटअरे (सरणी)
 }
वापस करना (
 <>
 {array.join(", ")}


 ऑनक्लिक = {() => {
 AddNumberToStart(0)
 AddNumberToEnd(0)
सांत्वना देनालॉग (सरणी)
 }}
 >
 जोड़ना 0 प्रारंभ/समाप्ति के लिए
 </button>
 </>
 )
}

यदि आप उपरोक्त कोड चलाते हैं, तो आप देखेंगे कि दोनों कार्यों ने सरणी के प्रारंभ और अंत में शून्य जोड़ दिया है। लेकिन इसने शून्य को पृष्ठ पर मुद्रित सरणी में नहीं जोड़ा है। आप बटन को क्लिक करना जारी रख सकते हैं, लेकिन UI वही रहता है।

ऐसा इसलिए है, क्योंकि दोनों कार्यों में, आप अपने राज्य को बदल रहे हैं सरणी.पुश (). प्रतिक्रिया स्पष्ट रूप से चेतावनी देती है कि राज्य प्रतिक्रिया में अपरिवर्तनीय होना चाहिए, जिसका अर्थ है कि आप इसे बिल्कुल नहीं बदल सकते। रिएक्ट अपनी स्थिति के साथ संदर्भात्मक मूल्यों का उपयोग करता है।

समाधान वर्तमान स्थिति (currentArray) तक पहुँचने के लिए है, उस स्थिति की एक प्रति बनाएँ, और उस प्रति के लिए अपने अपडेट करें:

समारोहaddNumberToStart(संख्या) {
 सेटअरे((वर्तमानअरे) => {
वापस करना [संख्या, ...वर्तमानअरे]
 })
}
समारोहaddNumberToStart(संख्या) {
 सेटअरे((वर्तमानअरे) => {
वापस करना [...वर्तमानअरे, संख्या]
 })
}

रिएक्ट में स्थिति को अपडेट करने का यह सही तरीका है। अब जब आप बटन पर क्लिक करते हैं, तो यह सरणी के प्रारंभ और अंत में शून्य जोड़ देता है। लेकिन सबसे महत्वपूर्ण बात यह है कि अपडेट तुरंत पेज पर दिखाई देंगे।

रिएक्ट के लिए अन्य महत्वपूर्ण जावास्क्रिप्ट अवधारणाएँ

इस लेख में रिएक्ट में कोडिंग से बचने के लिए कुछ सामान्य गलतियों को शामिल किया गया है। यहाँ शामिल तीनों गलतियाँ जावास्क्रिप्ट को ठीक से समझने में विफलता से उत्पन्न हुई हैं। क्योंकि रिएक्ट एक जावास्क्रिप्ट फ्रेमवर्क है, आपको रिएक्ट के साथ काम करने के लिए जावास्क्रिप्ट की ठोस समझ की आवश्यकता होगी। इसका अर्थ है उन महत्वपूर्ण अवधारणाओं को सीखना जो रिएक्ट के विकास से सबसे अधिक संबंधित हैं।