React • المستوى الثالث • الدرس 3

معالجة حالات التحميل والأخطاء (Loading & Error States)

العودة لفهرس المستوى

أهداف الدرس العلمية

تقديم شاشات ومؤشرات الانتظار (Loading States) لحين ورود الاستجابة.
معالجة الانقطاعات والأخطاء لتقديم تجربة مستخدم واضحة وراعية.
استخدام .catch() لالتقاط الأخطاء في سلسلة الوعود.
بناء واجهة تفاعلية مع 3 حالات: تحميل / خطأ / بيانات.

1. الحالات الثلاث في جلب البيانات

عند جلب البيانات من الخادم، يمر المكوّن بثلاث حالات متتالية يجب على المطوّر معالجتها جميعاً:

⏳ Loading

الحالة الابتدائية — يعرض مؤشر انتظار.

❌ Error

عند فشل الاتصال — يعرض رسالة خطأ واضحة.

✅ Success

عند وصول البيانات — يعرضها للمستخدم.

2. التقاط الأخطاء بـ .catch()

نضيف .catch() في نهاية سلسلة الوعود لالتقاط أي خطأ في الشبكة أو الاستجابة:

javascript

fetch('https://api.example.com/data')
  .then(res => res.json())
  .then(data => {
    setData(data);
    setLoading(false);
  })
  .catch(err => {
    setError('فشل الاتصال بالخادم');
    setLoading(false);  // ← لا ننسى إيقاف التحميل
  });

التطبيق العملي المباشر

تحدي الدرس الثالث: معالجة الأخطاء

قم بالتعديل على الكود في المحرر أدناه:

أضف متغير حالة جديد باسم error بقيمة ابتدائية null.
أضف .catch() في نهاية سلسلة الـ fetch لالتقاط الأخطاء.
داخل الـ catch، استدعِ setError("...") ثم setLoading(false).
أضف شرطاً if (error) قبل الـ return الرئيسي لعرض رسالة الخطأ.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للدرس الرابع