3 أخطاء تفاعلية للمبتدئين يمكن أن تدمر تطبيقك

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

اكتشف ثلاثة من أكثر أخطاء React شيوعًا التي يرتكبها المطورون. يمكنك ارتكاب هذه الأخطاء كمطور React مبتدئ أو متوسط ​​المستوى أو متقدم. لكن التعرف عليها وآثارها سيساعدك على تجنبها وحلها.

1. استخدام نوع خاطئ لوظيفة رد الاتصال

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

ضع في اعتبارك المكون التالي ، على سبيل المثال:

يصدّرتقصيروظيفةبرنامج() {
وظيفةمقبض(ه) {
 e.preventDefault ()
وحدة التحكم.سجل("تم إرسال النموذج!")
 }
وظيفةمطبعة(رقم) {
وحدة التحكم.سجل("مطبعة"، رقم)
 }
وظيفةمضاعف(رقم) {
يعود() => {
وحدة التحكم.سجل("مزدوج"، رقم * 2)
 }
 }





instagram viewer
يعود (
 <>
 {/ * الرمز سيذهب هنا * /}
 </>
 )
}

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

الآن ، بالانتقال إلى JSX ، لنبدأ بالطريقة الأولى والأكثر شيوعًا لتمرير دالة كمعالج حدث:

<استمارةعند تقديم={معالجة إرسال}>
<مدخليكتب="نص"اسم="نص"القيمة الافتراضية="أولي"/>
<زر>يُقدِّمزر>
استمارة>

يمرر هذا المثال اسم الوظيفة إلى الحدث عبر الخاصية onSubmit ، لذا استدعاءات React handleSubmit عند إرسال النموذج. داخل handleSubmit ، يمكنك الوصول إلى كائن الحدث ، مما يتيح لك الوصول إلى خصائص مثل event.target.value وطرق مثل event.preventDefault ().

الطريقة الثانية لتمرير وظيفة معالج الحدث هي استدعاءها داخل وظيفة رد الاتصال. بشكل أساسي ، أنت تقوم بالتمرير ، انقر فوق دالة تستدعي print () لك:

{[1, 5, 7].خريطة((رقم) => {
يعود (
 طباعة (رقم)}>
 طباعة {number}
 </button>
 )
})}

هذه الطريقة مفيدة في السيناريوهات التي تريد فيها تمرير البيانات المحلية إلى الوظيفة. المثال أعلاه يمرر كل رقم إلى وظيفة print (). إذا استخدمت الطريقة الأولى ، فلن تتمكن من تمرير الوسائط إلى الوظيفة.

الطريقة الثالثة هي حيث يرتكب الكثير من المطورين الكثير من الأخطاء. تذكر أن الدالة المضاعفة ترجع دالة أخرى:

وظيفةمضاعف(رقم) {
يعود() => {
وحدة التحكم.سجل("مزدوج"، رقم * 2)
 }
}

الآن إذا استخدمته في JSX مثل ذلك:

{[1, 5, 7].خريطة((رقم) => {
يعود (
 مضاعف (عدد)}>
 {number} مزدوج
 </button>
 )
})}

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

جميع الأساليب الثلاثة صالحة لأنه ، في جميع الحالات ، تقوم بتمرير وظيفة إلى الحدث. في React ، تحتاج إلى التأكد من تمرير دالة إلى خاصية حدث. يمكن أن يكون متغيرًا ، أو دالة مضمنة (مضمنة) ، أو كائنًا / وظيفة تُرجع دالة أخرى.

2. إخراج صفر أثناء فحص زائف

عندما كنت عرض عنصر شرطيًا في React، يمكنك استخدام عبارة if... else أو أسلوب الدائرة القصيرة. يشمل قصر الدائرة استخدام علامة العطف المزدوجة (&&). إذا كان الشرط قبل علامة العطف صحيحًا ، فسيُشغِّل المستعرض الكود بعد علامة العطف. إذا لم يكن الأمر كذلك ، فلن ينفذ المتصفح أي رمز.

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

ضع في اعتبارك الكود التالي:

يصدّرتقصيروظيفةبرنامج() {
مقدار ثابت مجموعة = [1, 2, 3, 4]
يعود (


 {array.length && (


مجموعة مصفوفة العناصر:/ span> {array.join ("،")}
 </div>
 )}
 </div>
 )
}

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

والسبب في ذلك هو ذلك الصفيف الطول ترجع صفر. القيمة صفر خاطئة في JavaScript. والمشكلة هي أن JSX لا تظهر على الشاشة. لا يتم عرض القيم الزائفة الأخرى مثل null و false و undefined. يمكن أن يؤدي هذا إلى تكوين انطباع سيئ لدى المستخدم لأن الصفر سيظهر دائمًا على الصفحة. في بعض الأحيان قد يكون الصفر صغيرًا جدًا لدرجة أنك لا تلاحظه.

الحل هو التأكد من إرجاع إما null أو undefined أو false. يمكنك القيام بذلك عن طريق التحقق صراحة من الصفر في الحالة بدلاً من الاعتماد على قيمة خاطئة:

يصدّرتقصيروظيفةبرنامج() {
مقدار ثابت مجموعة = [1, 2, 3, 4]
يعود (


 {array.length! == 0 && (


مجموعة مصفوفة العناصر:/ span> {array.join ("،")}
 </div>
 )}
 </div>
 )
}

الآن لن تظهر القيمة صفر على الشاشة حتى عندما تكون المصفوفة فارغة.

3. عدم تحديث الدولة بالشكل الصحيح

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

ينبع هذا الخطأ من عدم فهم كيفية تحديث الحالة عند استخدام الحالة الحالية. ضع في اعتبارك الكود التالي على سبيل المثال:

يصدّرتقصيروظيفةبرنامج() {
مقدار ثابت [array، setArray] = useState ([1, 2, 3])
وظيفةaddNumberToStart() {
 array.unshift (رقم)
 setArray (مجموعة)
 }
وظيفةaddNumberToEnd() {
 array.unshift (رقم)
 setArray (مجموعة)
 }
يعود (
 <>
 {array.join (", ")}


 onClick = {() => {
 addNumberToStart (0)
 addNumberToEnd (0)
وحدة التحكم.log (مجموعة)
 }}
 >
 يضيف 0 لتبدأ / تنتهي
 </button>
 </>
 )
}

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

هذا لأنه ، في كلتا الوظيفتين ، تقوم بتحويل حالتك بـ array.push (). يحذر React صراحةً من أن الحالة يجب أن تكون ثابتة في React ، مما يعني أنه لا يمكنك تغييرها على الإطلاق. تستخدم React القيم المرجعية مع حالتها.

الحل هو الوصول إلى الحالة الحالية (currentArray) ، وعمل نسخة من تلك الحالة ، وإجراء تحديثاتك على تلك النسخة:

وظيفةaddNumberToStart(رقم) {
 setArray ((CurrentArray) => {
يعود [number،... currentArray]
 })
}
وظيفةaddNumberToStart(رقم) {
 setArray ((CurrentArray) => {
يعود [... currentArray ، number]
 })
}

هذه هي الطريقة الصحيحة لتحديث الحالة في React. الآن عند النقر فوق الزر ، فإنه يضيف صفرًا إلى بداية المصفوفة ونهايتها. ولكن الأهم من ذلك ، أن التحديثات ستنعكس على الصفحة على الفور.

مفاهيم JavaScript مهمة أخرى لـ React

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