الحل: نموذج طلب متعدد الخطوات

إليك تطبيق نموذج الطلب متعدد الخطوات الذي يستخدم مسودة مملوكة للوالد للحفاظ على استقرار التنقل بين الخطوات، ويُجري التحقق من صحة الحقول على مستوى كل خطوة لمنع التقدم غير الصحيح، ويُجري فحوصات ترويجية غير متزامنة مع إلغاء طلب القديمة لتجنب توقف واجهة المستخدم، ويُطبق بوابة تحقق على مستوى المخطط عند الإرسال مع ملخص للأخطاء المعلنة. ويتعامل مع الإرسال كمعاملة منسقة باستخدام React 19 (useActionState ،useOptimistic ،useTransition ) لمنع إرسال الطلبات المكررة أثناء الرحلة، اعرض بوضوحSubmitting… قم بتحديد الحالة، وعرض إيصال متفائل يؤكد العملية أو يتراجع عنها دون إعادة ضبط المعالج أو فقدان إدخال المستخدم.

توضيح

إليكم شرح الكود أعلاه:

• فيApp.js ملف:

  • الأسطر من 1 إلى 17: استيراد خطافات React ، ومكونات الخطوة، وملخص أخطاء واجهة المستخدم، ووظائف خادم ، ومساعدات التحقق من الصحة.

  • الأسطر من 19 إلى 43: تحدد ترتيب الخطوات (STEPS ) وهيكل نموذج الأولية (INITIAL_DRAFT ).

  • الأسطر 45-58:computeTotals(draft) يتم حساب إجمالي المنتجات، والخصم، والشحن، والإجمالي النهائي بناءً على المسودة + العرض الترويجي.

  • الأسطر 60-84:flattenErrors(stepErrors) يحوّل كائنات الخطأ لكل خطوة إلى قائمة واحدة لـErrorSummary .

  • الأسطر 86-95: إعداد حالة المكون: بيانات المسودة، وفهرس الخطوة الحالية، وحالة الانتقال، وحالة الترويج، ومرجع العنوان.

  • الأسطر 98-113: تحسب أخطاء التحقق لكل خطوة وتحدد ما إذا كان بإمكان المستخدم المتابعة (canGoNext ).

  • الأسطر 116-153: تأثير التحقق من صحة رمز الترويج: تشغيل فحص غير متزامن، وإلغاء الطلبات القديمة، والتحديثاتappliedPromo .

  • الأسطر 156-158: إدارة التركيز: ينقل التركيز إلى العنوان عند تغيير الخطوة (إمكانية الوصول).

  • الأسطر 161–203:useActionState منطق الإرسال: يتحقق من صحة مخطط الطلب بالكامل، ويرسله إلى خادم، ويعيد الإيصال أو الخطأ.

  • الأسطر 205-208:useOptimistic يخزن إيصالًا متفائلًا حتى تتمكن واجهة المستخدم من عرض ...