شرح صفوف ومحتوى الفقرة
لتحديث خاصية داخل كائن متداخل بنقاء كامل في React القياسية، أنشئ نسخة جديدة لكل مستوى على مسار التغيير بدءاً من الكائن الأب وصولاً إلى الكائن الفرعي الهدف كما في المثال التفاعلي التالي:
HTML
import { useState } from 'react';
function PrefsBox() {
const [cfg, setCfg] = useState({
name: 'Studio',
ui: { compact: false },
});
const ui = { ...cfg.ui, compact: !cfg.ui.compact };
const flip = () => setCfg({ ...cfg, ui });
return <button onClick={flip}>Toggle UI</button>;
}