چطور با استفاده از هوک useState به یک آرایه عنصر جدید اضافه کنم؟ ( React JS )

برای اینکه یه آیتم جدید به آرایه‌ای که توی state ذخیره شده اضافه کنی، باید به نکته‌ای مهم توجه داشته باشی: نباید مستقیماً state رو تغییر بدی، چون این کار باعث می‌شه ری‌اکت نفهمه که state تغییر کرده و در نتیجه کامپوننت به‌روز نمی‌شه. برای اینکه این مشکل پیش نیاد، باید از تابع setter که useState بهت می‌ده استفاده کنی.

برای اضافه کردن آیتم جدید به آرایه، می‌تونی از تابع setItems استفاده کنی که از useState به دست آوردی. کاری که باید بکنی اینه که یه نسخه جدید از آرایه قبلی ایجاد کنی و آیتم جدید رو به اون اضافه کنی. مثلا به این شکل:

const [items, setItems] = useState([]);
const addItem = newItem => {
   setItems(prevItems => [...prevItems, newItem]);
};

توضیح کد:

1. setItems تابعیه که برای به‌روزرسانی state استفاده می‌شه.
2. prevItems آرایه‌ایه که قبل از به‌روزرسانی به عنوان state ذخیره شده.
3. [...prevItems, newItem] یه نسخه جدید از آرایه می‌سازه که شامل همه آیتم‌های قبلی به همراه آیتم جدیده.

این روش بهترین راه برای اضافه کردن آیتم به آرایه است، چون نه تنها state رو تغییر می‌ده، بلکه یه آرایه جدید می‌سازه که ری‌اکت بفهمه باید دوباره کامپوننت رو رندر کنه.

نکته مهم اینه که هیچ وقت نباید به طور مستقیم items.push(newItem) رو استفاده کنی، چون این کار state رو مستقیما تغییر می‌ده و مشکلاتی توی به‌روزرسانی کامپوننت‌ها به وجود میاره.

پس خلاصه که بگم: همیشه از setItems و سینتکس ... (سه نقطه) برای اضافه کردن آیتم جدید استفاده کن. این روش هم تمیزه و هم باعث می‌شه کامپوننت‌هات درست کار کنن.