استفاده از Index array در Key props در react.js

ممکنه برای شما هم پیش اومده باشه زمانی که میخواهید یک لیست از Item هارو render کنید از Index array ها در Key prop استفاده کنید.

در این مقاله میخواهیم به این مسائل بپردازیم:

• دلیل استفاده از Key prop هنگام render کردن List ها
• استفاده از Index array item در key prop چه مشکلاتی به وجود میاورد
• راه حل این موضوع

دلیل استفاده از Key prop

اگر تا الان با استفاده از Array method ها (مثل map و یا filter ) تلاش کرده باشید، یک لیست از Item هارو Render کنید با این خطا مواجه میشوید:

Warning: Each child in a list should have a unique &quotkey&quot prop.

ریکت نیاز به یک کلید (Key) دارد برای شناسایی هر Item از یک Array زمان Rendering، درواقع ریکت با استفاده از Key مشخص میکند، کدام آیتم از آرایه متعلق به کدام کامپوننت است.

زمانی که شما به درستی برای Item هاتون کلید مشخص کرده باشید، اون Key به ریکت کمک میکنه برای متوجه شدن اینکه دقیقا چه اتفاقی افتاده تا بتونه بهینه‌ترین Update رو روی DOM انجام بده.

در ساده‌ترین تعریف، اگر به درستی Key prop رو مشخص کرده باشید و یکی از عناصر Array تغییر پیدا کنه، ریکت بجای اینکه کل لیست رو مجددا Render کنه فقط اون عضوی که تغییر کرده رو Update میکنه.

استفاده از Index array item در key prop چه مشکلاتی به وجود میاورد؟

یکسری قوانین وجود داره برای کلیدها:

• کلید یک آیتم از آرایه باید نسبت به بقیه آیتم‌های آرایه یونیک یا یکتا باشد (اگر با کلیدهای آرایه های دیگر برابر باشد ایرادی ندارد)
• کلیدها، نباید تغییر کنند (به طور مثال، با اضافه کردن یا حذف کردن یا حتی sort کردن Array نباید کلید های این آرایه تغییر کند)
• کلیدها، نباید زمان Rendering ساخته شوند (اگر کلیدهارو زمان Rendering بسازید، با هربار Render شدن لیستتون کلیدها مجددا ساخته میشوند و تغییر میکنند و عملا با تعریف نکردن کلید هیچ تفاوتی ندارد)
  
  فکر میکنم تا الان دیگه متوجه این موضوع شدید که چرا نباید از index های یک Array به عنوان Key prop در render کردن Item ها استفاده کرد، طبق قانون دوم، کلیدها نباید تغییر کنند، زمانی که ما از index ها استفاده میکنیم، اگر به طور مثال عنصر اول آرایه حذف شود، عنصر دوم index عنصر اول را میگیرد و این باعث تغییر کلیدها میشود.
  زمانی که شما برای کلیدها از index استفاده میکنید ریکت دقیقا مانند زمانی رفتار میکند که هیچ کلیدی برای Item مشخص نکردید، و این ممکن است باعث به وجود اومدن مشکلاتی هنگام rendering شود.

راه حل این موضوع

اگر دیتایی که استفاده میکنید از یک Database میاد، میتونید از ID ردیف ها استفاده کنید که کاملا یکتا (unique) هستند.
و اگر دیتایی که استفاده میکنید Local هست خودتون میتونید با استفاده از یکسری پکیج ها و کتابخانه ها مثل uuid برای هر Item یک key یکتا بسازید.