रिएक्ट ट्यूटोरियल भाग 15: घटक राज्य कार्यशालाएं

आज, हम आपको घटकों की स्थिति के साथ काम करने पर दो हाथों की कक्षाओं को पूरा करने का सुझाव देते हैं। विशेष रूप से, आज के कार्यों का प्रदर्शन करते हुए, आप न केवल गुणों की अवधारणा को बेहतर ढंग से समझ सकते हैं, बल्कि प्रतिक्रिया-अनुप्रयोगों को डीबग करने पर भी काम कर सकते हैं जिसमें त्रुटियां हैं।



→ भाग 1: पाठ्यक्रम अवलोकन, प्रतिक्रिया की प्रतिक्रिया के कारण, ReactDOM और JSX
→ भाग 2: कार्यात्मक घटक
→ भाग 3: घटक फाइलें, परियोजना संरचना
→ भाग 4: माता-पिता और बच्चे के घटक
→ भाग 5: एक TODO आवेदन, स्टाइलिंग की मूल बातें पर काम शुरू
→ भाग 6: पाठ्यक्रम की कुछ विशेषताओं के बारे में, जेएसएक्स और जावास्क्रिप्ट
→ भाग 7: इनलाइन शैली
→ भाग 8: TODO आवेदन पर काम जारी रखा, घटकों के गुणों से परिचित
→ भाग 9: घटक गुण
→ भाग 10: घटक गुणों और स्टाइल के साथ काम करने पर कार्यशाला
→ भाग 11: डायनेमिक मार्कअप जेनरेशन और मैप एरे विधि
→ भाग 12: कार्यशाला, एक TODO आवेदन पर काम का तीसरा चरण
→ भाग 13: वर्ग-आधारित घटक
→ भाग 14: वर्ग-आधारित घटकों, घटक स्थिति पर कार्यशाला
→ भाग 15: घटक स्वास्थ्य कार्यशालाएँ
→ भाग 16: TODO अनुप्रयोग, ईवेंट हैंडलिंग पर काम का चौथा चरण
→ भाग 17: TODO अनुप्रयोग पर काम का पांचवा चरण, घटकों की स्थिति को संशोधित करता है
→ भाग 18: TODO आवेदन पर काम का छठा चरण
→ भाग 19: घटक जीवन चक्र विधियाँ
भाग 20: सशर्त प्रतिपादन में पहला पाठ
→ भाग 21: सशर्त प्रतिपादन पर दूसरा पाठ और कार्यशाला
→ भाग 22: TODO आवेदन पर काम का सातवां चरण, बाहरी स्रोतों से डेटा डाउनलोड करना
→ भाग 23: रूपों के साथ काम करने पर पहला पाठ
→ भाग 24: दूसरा रूप पाठ
→ भाग 25: रूपों के साथ काम करने पर कार्यशाला
→ भाग 26: अनुप्रयोग वास्तुकला, कंटेनर / घटक पैटर्न
→ भाग 27: पाठ्यक्रम परियोजना

पाठ 27. कार्यशाला। घटक स्थिति डिबगिंग

→ मूल

▍Zadanie

App.js create-react-app द्वारा बनाए गए एक मानक रिएक्ट एप्लिकेशन के App.js फ़ाइल से नीचे App क्लास कोड का विश्लेषण करें। यह कोड अधूरा है, इसमें त्रुटियां हैं।

 import React from "react" class App extends Component() {   return (       <div>           <h1>{this.state.name}</h1>           <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>       </div>   ) } export default App 

क्लास-आधारित App कंपोनेंट में कंस्ट्रक्टर नहीं होता है, इसकी स्थिति को इनिशियलाइज़ नहीं किया जाता है, लेकिन जब यह वापस लौटता है, तो इसका मतलब यह होता है कि इसमें कुछ डेटा के साथ एक स्टेट है।

आपका कार्य इस कोड को एक उपयोगी स्थिति में लाना है।

यदि आपके पास कोई अज्ञात त्रुटि संदेश आता है - तो समाधान देखने के लिए जल्दी मत करो। उदाहरण के लिए, स्वयं को आज़माएं, कोड को ध्यान से पढ़ें और इंटरनेट पर समस्या के बारे में जानकारी की तलाश करें, त्रुटि के कारण का पता लगाएं और इसे ठीक करें। डिबगिंग कोड एक मूल्यवान कौशल है जिसे वास्तविक परियोजनाओं पर काम करते समय आपको निश्चित रूप से आवश्यकता होगी।

▍Reshenie

एक वर्ग का शरीर एक कार्यात्मक घटक के शरीर के समान है। इसमें केवल return कमांड शामिल है, लेकिन कक्षाओं के आधार पर घटकों में, इस कमांड का उपयोग render() विधि में किया जाता है, और कक्षा के शरीर में नहीं। इसे ठीक करें।

 import React from "react" class App extends Component() {   render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

यदि हम कोड का विश्लेषण जारी रखते हैं, तो ब्राउज़र में प्रदर्शित त्रुटि संदेशों को देखते हुए, हम यह समझ सकते हैं कि हालांकि class App extends Component का निर्माण class App extends Component काफी सामान्य दिखता है, लेकिन Component के नाम से हम जो भी संदर्भित करते हैं उसके साथ कुछ गड़बड़ है। समस्या यह है कि आयात कमांड में, import React from "react" आयात करें, हम केवल React आयात करते हैं, लेकिन Component नहीं, परियोजना में। यही है, हमें या तो इस आदेश को संपादित करने की आवश्यकता है, इसे import React, {Component} from "react" फॉर्म import React, {Component} from "react" में class App extends React.Component , फिर क्लास बनाते समय हम मौजूदा कोड का उपयोग कर सकते हैं, या इस रूप में क्लास डिक्लेरेशन को फिर से लिख सकते हैं: class App extends React.Component । हम पहले विकल्प पर ध्यान केंद्रित करेंगे। अब घटक कोड इस तरह दिखता है:

 import React, {Component} from "react" class App extends Component() {   render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

सच है, समस्याएं खत्म नहीं होती हैं। एप्लिकेशन काम नहीं करता है, ब्राउज़र में एक TypeError: Cannot set property 'props' of undefined त्रुटि संदेश दिखाई देता है TypeError: Cannot set property 'props' of undefined , हमें सूचित किया जाता है कि वर्ग घोषणा की पहली पंक्ति के साथ कुछ गलत है।

यहाँ बिंदु यह है कि एक घटक की घोषणा करते समय, जिसे, जैसा कि हम पहले से ही समझ चुके हैं, एक घटक है जो एक वर्ग पर आधारित है, मूल वर्ग के नाम के बाद कोष्ठक की एक जोड़ी दिखाई देती है। उन्हें यहां ज़रूरत नहीं है, यह एक कार्यात्मक घटक नहीं है, इसलिए हम उनसे छुटकारा पा लेंगे। अब एप्लिकेशन कोड अधिक या कम व्यावहारिक हो जाता है, वर्ग पर आधारित घटक अब पूरी तरह से गलत नहीं दिखता है, लेकिन सिस्टम हमें त्रुटियों की रिपोर्ट करना जारी रखता है। अब त्रुटि संदेश इस तरह दिखता है: TypeError: Cannot read property 'name' of null । जाहिर है, यह एक घटक राज्य में संग्रहीत डेटा का उपयोग करने के प्रयास को संदर्भित करता है जिसे अभी तक प्रारंभ नहीं किया गया है। इसलिए, अब हम इसमें super() कॉल करने के लिए भूल गए बिना एक क्लास कंस्ट्रक्टर बनाएंगे, और इसमें उस वैल्यू को जोड़कर कंपोनेंट की स्थिति को इनिशियलाइज़ करेंगे, जिसके साथ कंपोनेंट काम करने की कोशिश कर रहा है।

यहाँ App घटक के लिए तैयार काम कोड है:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           name: "Sally",           age: 13       }   }     render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

यहां बताया गया है कि ब्राउज़र में एप्लिकेशन पेज कैसा दिखेगा।


ब्राउज़र में एप्लिकेशन पेज

पाठ 28. कार्यशाला। घटक राज्य, राज्य में संग्रहीत डेटा के साथ काम करते हैं

→ मूल

इस अभ्यास सत्र में, आपके पास घटकों की स्थिति के साथ काम करने का एक और मौका होगा।

▍Zadanie

नीचे कार्यात्मक घटक का कोड है। इसके आधार पर, निम्नलिखित करें:

1. इसे परिवर्तित करें ताकि घटक में एक राज्य हो।
2. घटक स्थिति में isLoggedIn गुण होना चाहिए, जो उपयोगकर्ता द्वारा लॉग इन किए जाने पर तार्किक मान को true isLoggedIn है, और अगर हमारे मामले में कोई "लॉगऑन" तंत्र नहीं है, तो false है, इसी मूल्य को मैन्युअल रूप से सेट किया जाना चाहिए, जब राज्य आरंभीकृत होता है)।
3. यह सुनिश्चित करने का प्रयास करें कि यदि उपयोगकर्ता लॉग इन है, तो घटक You are currently logged in पाठ को You are currently logged in जिसे You are currently logged in , और यदि नहीं, तो वह टेक्स्ट जिसे You are currently logged out । यह कार्य वैकल्पिक है, यदि आपको इसके कार्यान्वयन में कठिनाइयाँ हैं, तो आप उदाहरण के लिए, इंटरनेट पर विचारों की खोज कर सकते हैं।

यहाँ App.js फ़ाइल के लिए कोड है:

 import React from "react" function App() {   return (       <div>           <h1>You are currently logged (in/out)</h1>       </div>   ) } export default App 

▍Reshenie

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

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: true       }   }     render() {       return (           <div>               <h1>You are currently logged (in/out)</h1>           </div>       )   } } export default App 

आवेदन के स्वास्थ्य की जाँच करें।


ब्राउज़र में अनुप्रयोग

वास्तव में, यदि आप स्वयं इस बिंदु पर पहुंच गए हैं, तो इसका मतलब है कि आपने पाठ्यक्रम में सामग्री को कक्षाओं और घटकों के राज्य के आधार पर सीखा है। अब हम एक वैकल्पिक कार्य में लगे रहेंगे।

संक्षेप में, इस असाइनमेंट को पूरा करने के लिए हमें जो करने की आवश्यकता है, उस पर एक पाठ में चर्चा की जाएगी जो सशर्त प्रतिपादन पर केंद्रित है, इसलिए यहां हम थोड़ा आगे बढ़ते हैं। इसलिए, हम एक वैरिएबल की घोषणा करने और उसे शुरू करने जा रहे हैं, जिसमें isLoggedIn स्टेट isLoggedIn में संग्रहीत किए गए स्ट्रिंग के आधार पर या out स्ट्रिंग होगी। हम इस चर के साथ render() विधि में काम करेंगे, पहले डेटा का विश्लेषण करेंगे और उसमें वांछित मूल्य लिखेंगे, और फिर जेएसएक्स कोड में इसका उपयोग घटक द्वारा वापस किया जाएगा। यहाँ हमने क्या किया:

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: true       }   }     render() {       let wordDisplay       if (this.state.isLoggedIn === true) {           wordDisplay = "in"       } else {           wordDisplay = "out"       }       return (           <div>               <h1>You are currently logged {wordDisplay}</h1>           </div>       )   } } export default App 

कृपया ध्यान दें कि wordDisplay चर render() विधि में घोषित एक साधारण स्थानीय चर है, इसलिए, इस विधि के अंदर इसे एक्सेस करने के लिए, आपको बस इसका नाम निर्दिष्ट करना होगा।

अब आवेदन पृष्ठ कैसा दिखेगा:


ब्राउज़र में एप्लिकेशन पेज

isLoggedIn राज्य isLoggedIn true सेट true , इसलिए You are currently logged in गया पाठ पृष्ठ पर प्रदर्शित होता है। पाठ प्रदर्शित करने के लिए You are currently logged out आपको घटक कोड में, isLoggedIn का मान false पर बदलने की आवश्यकता है।

यह ध्यान दिया जाना चाहिए कि इस समस्या को अन्य तरीकों से हल किया जा सकता है। लेकिन हमने जो कोड प्राप्त किया है वह स्पष्ट और कुशल है, इसलिए हम उस पर ध्यान isLoggedIn करेंगे, हालांकि, उदाहरण के लिए, यह देखते हुए कि isLoggedIn एक तार्किक चर है, if (this.state.isLoggedIn === true) स्थिति को फिर से लिखा जा सकता है जैसे if (this.state.isLoggedIn) ।

परिणाम

आज आपने घटकों की स्थिति के साथ काम करने का अभ्यास किया, विशेष रूप से, कोड में त्रुटियों को ठीक किया, एक कार्यात्मक घटक को कक्षाओं के आधार पर संसाधित किया, और सशर्त प्रतिपादन में लगे। अगली बार आपके पास एक और व्यावहारिक काम और एक नया विषय होगा।

प्रिय पाठकों! क्या आपने यहां प्रस्तुत व्यावहारिक कार्यों में से पहले को पूरा करके सभी त्रुटियों को खोजने और ठीक करने का प्रबंधन किया था?