رد فعل البرنامج التعليمي الجزء 15: ورش عمل الدولة المكون

اليوم ، نقترح عليك إكمال فصلين عمليين على العمل مع حالة المكونات. على وجه الخصوص ، عند تنفيذ مهام اليوم ، لا يمكنك فقط فهم مفهوم الخصائص بشكل أفضل ، ولكن أيضًا العمل على تصحيح تطبيقات Reacting التي توجد بها أخطاء.



→ الجزء 1: نظرة عامة على الدورة ، وأسباب شعبية React ، ReactDOM و JSX
→ الجزء 2: المكونات الوظيفية
→ الجزء 3: ملفات المكونات ، هيكل المشروع
→ الجزء 4: مكونات الوالدين والطفل
→ الجزء 5: بدء العمل في تطبيق TODO ، أساسيات التصميم
→ الجزء 6: حول بعض ميزات الدورة ، JSX وجافا سكريبت
→ الجزء 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. ورشة العمل. تصحيح حالة المكون

→ الأصل

ob الوظيفة

قم بتحليل كود فئة App أدناه من ملف App.js الخاص App.js القياسي الذي تم إنشاؤه بواسطة create-react-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 المستند إلى الفصل على مُنشئ ، ولا تتم تهيئة حالته ، ولكن عند تكوين ما يعيده ، فإنه يعني أن لديه حالة مع بعض البيانات.

مهمتك هي جلب هذا الرمز إلى حالة قابلة للاستخدام.

إذا صادفتك رسالة خطأ معينة غير معروفة لك - فلا تتعجل في النظر إلى الحل. جرب نفسك ، على سبيل المثال ، قراءة التعليمات البرمجية بعناية والبحث عن معلومات حول المشكلة على الإنترنت ، ومعرفة سبب الخطأ وإصلاحه. يعد رمز التصحيح مهارة قيمة ستحتاجها بالتأكيد عند العمل في مشاريع حقيقية.

olution الحل

يشبه جسم الفئة جسم المكون الوظيفي. يحتوي فقط على أمر 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 يبدو طبيعياً تمامًا ، فلا يزال هناك خطأ في ما نشير إليه باسم Component . المشكلة هي أنه في أمر الاستيراد ، قم import React from "react" ، ونحن نستورد React فقط ، ولكن ليس Component ، في المشروع. بمعنى ، نحن بحاجة إلى إما تحرير هذا الأمر ، أو إحضاره إلى نموذج import React, {Component} from "react" ، ثم عند إنشاء فئة ، يمكننا استخدام التعليمات البرمجية الموجودة ، أو إعادة كتابة إعلان الفصل في هذا النموذج: 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. ورشة العمل. حالة المكون ، العمل مع البيانات المخزنة في الدولة

→ الأصل

في جلسة التدريب العملي هذه ، ستتاح لك فرصة أخرى للعمل مع حالة المكونات.

ob الوظيفة

أدناه هو رمز المكون الوظيفي. بناءً عليه ، قم بما يلي:

1. قم بتحويله بحيث يكون للمكون حالة.
2. يجب أن يكون isLoggedIn خاصية isLoggedIn ، التي تخزن القيمة المنطقية true إذا كان المستخدم قد قام بتسجيل الدخول ، isLoggedIn إن لم يكن (في حالتنا ، لا توجد آليات "تسجيل الدخول" هنا ، يجب تعيين القيمة المقابلة يدويًا ، عند تهيئة الحالة).
3. حاول التأكد من أنه في حالة تسجيل دخول المستخدم ، 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 

olution الحل

لدينا مكون وظيفي تحت تصرفنا. لتزويدها بحالة ، يجب تحويلها إلى مكون بناءً على الفصل وتهيئة حالته. إليك ما يشبه رمز المكون المحول:

 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 

تحقق من صحة التطبيق.


تطبيق في المتصفح

في الواقع ، إذا كنت قد وصلت إلى هذه النقطة ، فهذا يعني أنك تعلمت المادة في الدورة التدريبية المخصصة للمكونات القائمة على الفئات وحالة المكونات. الآن سوف نشارك في مهمة اختيارية.

في جوهر الأمر ، سوف نناقش ما يتعين علينا القيام به لإكمال هذه المهمة في درس يركز على التقديم الشرطي ، لذلك نحن نمضي قدماً قليلاً. لذلك ، سنقوم بإعلان وتهيئة متغير يحتوي على السلسلة in أو out حسب ما يتم تخزينه في isLoggedIn الحالة isLoggedIn . سنعمل مع هذا المتغير في طريقة render() ، ونحلل أولاً البيانات ونكتب القيمة المطلوبة فيها ، ثم نستخدمها في كود JSX الذي أرجعه المكون. إليك ما انتهى بنا:

 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 هو متغير محلي عادي تم الإعلان عنه في طريقة wordDisplay render() ، وبالتالي ، للوصول إليه داخل هذه الطريقة ، تحتاج فقط إلى تحديد اسمه.

إليك ما ستبدو عليه صفحة التطبيق الآن:


صفحة التطبيق في المتصفح

تم isLoggedIn حالة isLoggedIn على " true ، لذلك يتم عرض النص الذي You are currently logged in على الصفحة. لعرض النص You are currently logged out تحتاج إلى تغيير ، في رمز المكون ، قيمة isLoggedIn إلى false .

تجدر الإشارة إلى أنه يمكن حل هذه المشكلة بطرق أخرى. لكن الشفرة التي حصلنا عليها واضحة وفعالة ، لذلك isLoggedIn ، على سبيل المثال ، بالنظر إلى أن "تم تسجيل isLoggedIn هو متغير منطقي ، الشرط if (this.state.isLoggedIn === true) يمكن إعادة كتابته كما if (this.state.isLoggedIn) .

ملخص

لقد مارست اليوم العمل مع حالة المكونات ، على وجه الخصوص ، تصحيح الأخطاء في التعليمات البرمجية ، ومعالجة مكون وظيفي في مكون بناءً على الفئات ، والمشاركة في التقديم الشرطي. في المرة القادمة سيكون لديك عمل آخر وموضوع جديد.

أعزائي القراء! هل تمكنت من العثور على جميع الأخطاء وحلها بنفسك عن طريق إكمال أول عمل عملي مقدم هنا؟