التحدي: نموذج طلب متعدد الخطوات
أنشئ نموذج طلب متعدد الخطوات آمن وسهل الوصول إليه React (السلة، الشحن، الدفع، المراجعة). احتفظ بحالة المسودة في العنصر الرئيسي، وقم بتشغيل التحقق من صحة كل خطوة بالإضافة إلى عمليات التحقق من العروض الترويجية غير المتزامنة دون توقف واجهة المستخدم، وأرسل الطلب باستخدام معاملة React 19 (useActionState، useOptimistic، useTransition) التي تقفل البيانات المكررة وتعرض النتائج من معلقة إلى مؤكدة (أو قابلة للتراجع).
سنغطي ما يلي...
بيان المشكلة
يلزم وجود واجهة مستخدم نموذج طلب متعدد الخطوات (معالج إتمام الشراء) بأربع خطوات: سلة التسوق، الشحن، الدفع، والمراجعة والإرسال. يجب أن تظل الواجهة متجاوبة أثناء تنقل المستخدمين بين الخطوات، وأثناء عملية التحقق من صحة البيانات (بما في ذلك التحقق غير المتزامن من العروض الترويجية)، وأثناء معالجة الطلب النهائي كمعاملة. عند فشل التحقق، يجب عرض الأخطاء دون تحويل واجهة المستخدم إلى مؤشرات تحميل عامة أو فقدان حالة المسودة. أثناء معالجة الطلبات، يجب منع تكرارها، ويجب أن تميز واجهة المستخدم بوضوح بين الطلبات قيد الانتظار والطلبات المؤكدة.
معايير النجاح
تؤكد معايير النجاح التالية أن المعالج يظل مستقرًا في ظل التعديلات المستمرة وأن التنقل والتحقق من الصحة وإرسال المعاملات وإمكانية الوصول تعمل جميعها معًا بشكل صحيح.
يمكن للمستخدم الانتقال
Back/Nextعبر الخطوات دون فقدان أي إدخال مسودة، حتى عند تحميل/إلغاء تحميل الخطوات.لا يتقدم التنقل بين الخطوات عندما تحتوي الخطوة الحالية على أخطاء تعيق التقدم؛ وتظهر الأخطاء بالقرب من الحقول ذات الصلة.
يتم التحقق من صحة رمز العرض الترويجي بشكل غير متزامن ويعرض ...