انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: تحديث الكائنات في الحالة دون تعديل مباشر

Copying Objects with Spread تحديث الكائن بمعامل الانتشار

تعلّم لماذا يفشل التعديل المباشر لكائنات الحالة مع فحص Object.is في React، وكيف تنشئ نسخاً محدثة بمعامل الانتشار والمفاتيح المحسوبة والكائنات المتداخلة.
3 صفوف تعليمية
ReactJS
0 مشاهدة

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

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

عندما يضم الكائن عدة خصائص مثل الاسم والمسمى الوظيفي والمدينة وتريد تعديل خاصية واحدة فقط، يوفر لك معامل انتشار الكائنات ({ ...profile, city: 'Alexandria' }) طريقة أنيقة ومختصرة لنسخ كافة الحقول السابقة داخل كائن جديد مع تحديث الحقل المطلوب فقط.

الصف 2 كود برمجي
HTML 
import { useState } from 'react';

function MentorCard() {
  const [mentor, setMentor] = useState({
    name: 'Nour',
    level: 'Senior',
  });
  const up = () =>
    setMentor({ ...mentor, level: 'Principal' });
  return <button onClick={up}>{mentor.level}</button>;
}
جرّب بنفسك
الصف 3 معاينة حية

جميع فقرات هذا الدرس (تحديث الكائنات في الحالة دون تعديل مباشر)