خطأ في react uncontrolled input

هذا الخطأ يظهر لك بسبب قيامك بتعريف الحالة(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

مما يؤدي إلى ظهور رسالة الخطأ

لحل المشكلة يمكنك فعل أحد الأمرين

1. إما أن تقوم بإعطاء قيمة مبدأية للحقل name

   const [form,setForm]=useState({
   name:""
   })

    

2. أو أن تقوم بإعطاء قيمة مبدأية للخاصية  value في حالة كان الحقل name غير معرف

   <input value={form.name || ""}/>

    

يمكن استخدام 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}