كيف تمنع النقر المزدوج وتقديم النموذج المتكرر (Double Submissions)؟

الإجابة المختصرة

بتعطيل زر الإرسال بمجرد بدء الطلب باستخدام حالة isSubmitting، مع إلغاء أو تجاهل أي طلبات لاحقة أثناء معالجة الطلب الأول.

الشرح

إذا نقر المستخدم زر الحفظ عدة مرات بسرعة، قد يتم إرسال طلبات متعددة للخادم وتكرار الخصم المالي أو إنشاء سجلات مكررة. يتم حل هذه المشكلة بالواجهة بتعطيل الزر (disabled={isSubmitting}) وإظهار مؤشر تحميل، مع تطبيق آليات الـ Idempotency Keys في الخادم كخط دفاع أساسي.

مثال بالكود

function SubmitButton({ isSubmitting }: { isSubmitting: boolean }) {
  return (
    <button type="submit" disabled={isSubmitting} className="btn-primary">
      {isSubmitting ? "جاري المعالجة..." : "تأكيد الدفع"}
    </button>
  );
}

أخطاء شائعة

• الاعتماد فقط على تعطيل الزر في المتصفح دون حماية الخادم بواسطة Idempotency Tokens.

أسئلة متابعة

• كيف تتعامل مع حفظ مسودات النماذج تلقائياً (Auto-save) لمنع ضياع مدخلات المستخدم؟

المصادر

• React docs — useFormStatus