حذف عناصر المصفوفة بدالة filter | تحديث المصفوفات في الحالة بطرق غير مغيرة

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

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

تُعد دالة filter() الطريقة الأنقى والأكثر مقروئية لحذف عنصر من مصفوفة الحالة؛ فكتابة setItems(items.filter(item => item.id !== targetId)) تنتج مصفوفة جديدة تحتفظ بجميع العناصر باستثناء العنصر صاحب المعرّف المطلوب حذفه.

الصف 2 صورة توضيحية

الأنماط النقية الثلاثة لمصفوفات الحالة في React: الإضافة بمعامل الانتشار والحذف بدالة filter والتعديل بدالة map

الصف 3 كود برمجي

HTML

import { useState } from 'react';
function SavedLessons() {
  const [list, setList] = useState([
    { id: 'a', title: 'Events' },
    { id: 'b', title: 'useState' },
  ]);
  const del = (id) =>
    setList(list.filter((x) => x.id !== id));
  return (
    <button onClick={() => del('a')}>Remove</button>
  );
}

جرّب بنفسك

الصف 4 ملاحظة هامة

Removing Items with filter حذف عناصر المصفوفة بدالة filter

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

جميع فقرات هذا الدرس (تحديث المصفوفات في الحالة بطرق غير مغيرة)