انتقل إلى محتوى الدرس

Updating and Deleting Records تعديل وحذف السجلات بالخادم

أرسل طلبات الإنشاء والتحديث والحذف عبر أفعال POST وPUT وDELETE من دوال الأحداث في React مع تعطيل الأزرار أثناء الحفظ والتراجع الآمن وحماية جلسات المصادقة.
4 صفوف تعليمية
ReactJS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

لتعديل سجل قائم نرسل طلب method: 'PUT' أو 'PATCH' إلى عنوان المورد المحدد مثل /api/tasks/t-1، وفور نجاح الاستجابة نستبدل الكائن المعدّل داخل مصفوفة الحالة بنقاء عبر الدالة prev.map((item) => item.id === updated.id ? updated : item).

ولحذف سجل نرسل طلب method: 'DELETE' إلى عنوانه، وبعد التحقق من response.ok نستبعده من الواجهة عبر prev.filter((item) => item.id !== id).

الصف 2 صورة توضيحية
مخطط يوضح أفعال تعديل البيانات الثلاثة من معالجات الأحداث في React: الإنشاء بـ POST والتعديل بـ PUT والحذف بـ DELETE
الصف 3 كود برمجي
HTML
// Update with PUT + map:
setTasks((prev) =>
  prev.map((t) => (t.id === updated.id ? updated : t))
);
// Delete with DELETE + filter:
setTasks((prev) => prev.filter((t) => t.id !== id));
الصف 4 ملاحظة هامة