Object & Array State حالة الكائنات والمصفوفات
آخر تحديث: 2026-11-03
Object & Array State حالة الكائنات والمصفوفات
يجب استبدال الحالة بكائن جديد أو مصفوفة جديدة قبل أن يلاحظ React أي تحديث: استخدم معامل النشر للكتابة فوق حقل في الكائنات، واستخدم النشر أو map أو filter لبناء مصفوفة جديدة للقوائم. أما التعديل في المكان فيترك المرجع كما هو، فلا يرى React أي تغيير ولا تتحدّث الواجهة. والتحديث غير القابل للتعديل قاعدة يخوضها كل مطوّر React مراراً.
| المجموعة | العرض والحالة |
|---|---|
| النوع | نمط |
| منذ الإصدار | React 16.8 |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
setUser({ ...user, name: 'New name' }) // كائن: وسّع ثم استبدل القيمة
setList([...list, newItem]) // مصفوفة: وسّع وأضف في النهاية
setList(list.filter((x) => x.id !== id)) // مصفوفة: استخدم filter للحذفالقيمة المرجعة：لا قيمة معادة — مجرد اصطلاح برمجي ونموذج ذهني.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
يُعرض الاسم «Alice» والوسم «React»؛ الضغط على زر إعادة التسمية يحوّل الاسم إلى «Bob»، والضغط على زر إضافة وسم يضيف وسم «Hooks» في كل مرة — وكل تحديث يتم بإنشاء كائن جديد.💡 النقاط الأساسية
⚠️ تحذير user.name = 'x' أو user.tags.push(...) لا يُطلق إعادة عرض: المرجع يبقى كما هو، فيظن React أن شيئاً لم يتغيّر.
💡 نصيحة انشر الكائنات المتداخلة طبقة بطبقة: setUser({ ...u, addr: { ...u.addr, city: 'Shanghai' } })؛ فالنشر في الطبقة الخارجية وحدها لا يكفي.
ℹ️ ملاحظة اجعل البنية مسطّحة والحالات مستقلة، فذلك يزيل كثيراً من الشيفرة المتكرّرة التي تنتج عن نشر كائنات جديدة طبقة بطبقة.
🏷️ المزيد من العرض والحالة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
أساسيات useState
الدرس السادس من الدليل: أنماط التحديث غير القابل للتعديل لحالة الكائنات والمصفوفات.
❓ الأسئلة الشائعة
س لماذا لا تتحدّث الصفحة عند تغيير حالة كائن؟
ج يقارن React المرجع القديم بالجديد عبر Object.is: التعديل في المكان يبقي المرجع كما هو، فتُحسب الحالة غير متغيّرة. يجب إنشاء كائن جديد معامل النشر وتمريره إلى setState.
س كيف أحدّث حالة كائن متداخل بشكل صحيح؟
ج انشر من المستوى الذي تغيّر حتى المستوى الأعلى: setUser({ ...user, addr: { ...user.addr, city: 'Shanghai' } })، مع إبقاء كل المراجع غير الممسوكة كما هي.
س كيف أضيف عناصر وأزيلها من مصفوفة الحالة؟
ج أضف بـ [...list, item] أو في المقدمة بـ [item, ...list]؛ وأزل بـ filter((x) => x.id !== id). وكلاهما يعيد مصفوفة جديدة.
