شرح صفوف ومحتوى الفقرة
لإرسال بيانات نموذج بصيغة JSON عبر طلب POST، ابدأ باستدعاء e.preventDefault() لمنع المتصفح من إعادة تحميل الصفحة. ثم مرّر كائن الإعدادات إلى fetch() متضمناً method: 'POST'، وتحديد نوع المحتوى في رؤوس HTTP عبر headers: { 'Content-Type': 'application/json' }، وتحويل الكائن لنص عبر body: JSON.stringify(payload).
وبعد التحقق من نجاح response.ok، اقرأ السجل العائد من الخادم (الذي يحمل المعرّف الرسمي المولّد id) وأضفه بنقاء إلى مصفوفة الحالة عبر التحديث الدالي setTasks((prev) => [...prev, createdTask]).
HTML
const res = await fetch('/api/tasks', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title, done: false }),
});
if (!res.ok) throw new Error('Create failed');
const created = await res.json();
setTasks((prev) => [...prev, created]);