خالد مرتضى نشر 9 سبتمبر 2021 أرسل تقرير مشاركة نشر 9 سبتمبر 2021 (معدل) لدي هذا الكود وعندما أحاول كتابة شئ في الinput تأتينى تلك الرسالةA component is changing an uncontrolled input of type text to be controlled error in ReactJS const Form=()=>{ const [form,setForm]=useState({}) return( <> <input value={form.name} name="name" onChange={(e)=>setForm({...form,name:e.target.value})} /> </> ) } تم التعديل في 9 سبتمبر 2021 بواسطة Wael Aljamal توضيح السؤال 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 شرف الدين حفني نشر 9 سبتمبر 2021 أرسل تقرير مشاركة نشر 9 سبتمبر 2021 هذا الخطأ يظهر لك بسبب قيامك بتعريف الحالة(state) بهذا الشكل const [form,setForm]=useState({}) إن ﻻحظت ستجد أن الكائن الخاص بحالة الform عبارة عن كائن فارغ, فبالتالي تكون قيمة خاصية value في الinput تساوي undefined أي يتم حدوث الrender بهذا الشكل <input value={undefined} name="name" onChange={(e)=>setForm({...form,name:e.target.value})} /> وبما أن القيمة غير معرفة فيتم معاملة الinput على أنه uncontrolled, وعندما يتم كتابة شئ ما في الحقل تقوم دالة onChange بإسناد قيمة إلى الحقل name في الكائن form ليصبح بهذا الشكل { name:"بعض الكﻻم" } فبالتالي تصبح قيمة الخاصية value تساوي "بعض الكﻻم" أي لم تعد غير معرفة, فبالتالي يصبح الinput في حالةcontrolled مما يؤدي إلى ظهور رسالة الخطأ لحل المشكلة يمكنك فعل أحد الأمرين إما أن تقوم بإعطاء قيمة مبدأية للحقل name const [form,setForm]=useState({ name:"" }) أو أن تقوم بإعطاء قيمة مبدأية للخاصية value في حالة كان الحقل name غير معرف <input value={form.name || ""}/> اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Wael Aljamal نشر 9 سبتمبر 2021 أرسل تقرير مشاركة نشر 9 سبتمبر 2021 يمكن استخدام Default Values كخاصية للعنصر input وهي مسؤولة عن عملية التهيئة الأولى وتتجنب حدوث خطأ <input defaultValue="Bob" value={form.name} name="name" onChange={(e)=>setForm({...form,name:e.target.value})} /> وإن أردت وضع قيمة افتراضية ضمن value يمكن استخدام المعامل ؟؟ nullish coalescing بدل or || value={name ?? ''} checked={bool ?? false} 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
خالد مرتضى
لدي هذا الكود وعندما أحاول كتابة شئ في الinput تأتينى تلك الرسالةA component is changing an uncontrolled input of type text to be controlled error in ReactJS
توضيح السؤال
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.