چطور آرایه‌های state رو در React.js به درستی تغییر بدم؟

برای اینکه بتونی به درستی state شامل آرایه رو توی React.js تغییر بدی، مهمه که همیشه از یه کپی جدید از آرایه استفاده کنی و مستقیماً به خود state دست نزنی. اینجوری React متوجه تغییرات می‌شه و کامپوننت‌هات به درستی رندر می‌شن.

برای مثال، فرض کن یه state داری به این شکل:

const [items, setItems] = useState([]);

حالا برای اضافه کردن یه آیتم جدید به این آرایه، به جای اینکه مستقیماً به items دست بزنی، باید یه کپی از این آرایه بسازی و اون رو آپدیت کنی:

setItems([...items, newItem]);

این کد به این صورت کار می‌کنه که اول یک کپی از آرایه‌ی items با استفاده از عملگر spread ... ساخته می‌شه، بعدش newItem به انتهای اون اضافه می‌شه و در نهایت این آرایه‌ی جدید به عنوان state جدید تنظیم می‌شه.

به همین ترتیب، برای حذف کردن یک آیتم از آرایه، مثلاً با استفاده از فیلتر:

setItems(items.filter(item => item.id !== idToRemove));

این کد همه‌ی آیتم‌هایی که شناسه‌شون با idToRemove مطابقت نداره رو نگه می‌داره و یه آرایه‌ی جدید می‌سازه و بعدش اون رو به عنوان state جدید تنظیم می‌کنه.

به طور کلی، نکته مهم اینه که همیشه با استفاده از متدهای مثل map, filter, concat, و slice یه کپی جدید از آرایه بسازی و تغییرات رو روی اون اعمال کنی، نه اینکه مستقیماً به آرایه اصلی دست بزنی.

این روش تضمین می‌کنه که React متوجه تغییرات در state می‌شه و کامپوننت‌ها به درستی آپدیت می‌شن.

نکته آخر اینکه حواست باشه React به مقادیر جدید نیاز داره تا متوجه تغییرات بشه، پس همیشه از روش‌هایی که مقادیر جدید برمی‌گردونن استفاده کن تا state به درستی به‌روز بشه و کامپوننت‌ها هم رندر بشن.