‫چگونه یک کلید کوچک از بروز خطایی بزرگ در رابط کاربری Blazor جلوگیری کرد

@foreach (var item in Items)
{
    <ItemComponent Item="item" />
}

@foreach (var item in Items)
{
    <ItemComponent Item="item" @key="item.Id" />
}

1. حفظ حالت کامپوننت: زمانی که کاربر با یک کامپوننت تعامل می‌کند (مثلاً وارد کردن متن در یک فیلد ورودی)، @key تضمین می‌کند که این حالت به آیتم درست متصل باقی بماند، حتی اگر ترتیب لیست تغییر کند.
2. بهینه‌سازی عملکرد: با کاهش بازسازی‌های غیرضروری، @key به بهبود عملکرد برنامه کمک می‌کند، زیرا Blazor فقط کامپوننت‌های تغییر یافته را به‌روزرسانی می‌کند.
3. جلوگیری از خطاهای رابط کاربری: بدون @key، ممکن است داده‌های یک کامپوننت به اشتباه به کامپوننت دیگری منتقل شوند، که منجر به نمایش نادرست یا رفتار غیرمنتظره می‌شود.

@foreach (var task in Tasks)
{
    <TaskComponent Task="task" />
}

@code {
    List<TaskModel> Tasks = new List<TaskModel>
    {
        new TaskModel { Id = 1, Title = "Task 1", IsCompleted = false },
        new TaskModel { Id = 2, Title = "Task 2", IsCompleted = false }
    };
}

@foreach (var task in Tasks)
{
    <TaskComponent Task="task" @key="task.Id" />
}

1. انتخاب کلید مناسب: کلید باید منحصربه‌فرد و پایدار باشد. استفاده از شناسه‌های تولیدشده توسط پایگاه داده (مانند GUID یا IDهای عددی) معمولاً بهترین گزینه است. از استفاده از اندیس‌های لیست (Index) به‌عنوان کلید خودداری کنید، زیرا این اندیس‌ها با تغییر لیست تغییر می‌کنند و مشکلاتی مشابه حالت بدون @key ایجاد می‌کنند.
2. مدیریت تغییرات لیست: اگر لیست به‌صورت پویا تغییر می‌کند (مثلاً از طریق API یا ورودی کاربر)، اطمینان حاصل کنید که کلیدها در تمام به‌روزرسانی‌ها ثابت می‌مانند.
3. اشکال‌زدایی: اگر همچنان با مشکلات رابط کاربری مواجه هستید، از ابزارهای توسعه‌دهنده مرورگر (Browser Developer Tools) برای بررسی درخت رندر Blazor استفاده کنید. همچنین، فعال کردن حالت توسعه (Development Mode) در Blazor می‌تواند اطلاعات مفیدی درباره خطاها ارائه دهد.