0
سبد خرید من 0 دوره
سبد خرید شما خالیست :(
پرسش

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

Correct modification of state arrays in React.js

من در حال کار با React.js هستم و یک state دارم که شامل یک آرایه هست. وقتی می‌خوام این آرایه رو تغییر بدم (مثل اضافه کردن یا حذف کردن آیتم‌ها)، متوجه شدم که تغییراتم درست اعمال نمی‌شه و کامپوننت من آپدیت نمی‌شه. چطور می‌تونم به درستی state شامل آرایه رو در React.js تغییر بدم؟

1403/06/07
پاسخ
محمدامین سعیدی راد
بیوگرافی محمدامین سعیدی راد

برای اینکه بتونی به درستی 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 به درستی به‌روز بشه و کامپوننت‌ها هم رندر بشن.

پاسخ: 1403/06/07
آخرین آپدیت: 1403/08/16