انتقل إلى محتوى الدرس

Designing Helpful Empty States معالجة حالة عدم وجود نتائج

صمّم واجهات React غير متزامنة تغطي مؤشرات التحميل المتاحة، ورسائل الخطأ الآمنة للمستخدم، وأزرار إعادة المحاولة، وحالة القائمة الفارغة عبر متغير حالة موحد.
3 صفوف تعليمية
ReactJS
3 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

وصول مصفوفة خالية مع رمز 200 OK يعني نجاح الاستعلام برمجياً مع عدم تطابق أي سجل، وليس عطلاً في الشبكة. ميّز دائماً بين حالتين شائعتين للفراغ: حساب جديد لم يُضف فيه أي عنصر بعد (اعرض دعوة لإضافة العنصر الأول)، أو بحث دقيق لم يطابق نتائج (اعرض كلمة البحث الحالية مع زر فوري لمسح التصفية).

الصف 2 كود برمجي
HTML
if (status === 'success' && items.length === 0) {
  return (
    <div className="empty-card">
      <p>No hardware matches "{search}".</p>
      <button onClick={() => setSearch('')}>
        Show All
      </button>
    </div>
  );
}
الصف 3 ملاحظة هامة