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

Pending Buttons Double Submit تعطيل الزر لمنع الإرسال المكرر

أرسل طلبات الإنشاء والتحديث والحذف عبر أفعال POST وPUT وDELETE من دوال الأحداث في React مع تعطيل الأزرار أثناء الحفظ والتراجع الآمن وحماية جلسات المصادقة.
2 صفوف تعليمية
ReactJS
0 مشاهدة

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

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

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

حصّن كل نموذج بطبقتين متكاملتين: افحص if (isSubmitting) return; في مطلع دالة الإرسال (لمنع تكرار مفتاح الإدخال Enter أيضاً)، واربط السمة disabled={isSubmitting} بزر <button> مع تبديل نصه إلى «جاري الحفظ...» وإعادته داخل كتلة finally مضمونة التنفيذ.

الصف 2 ملاحظة هامة