Blazor基于对象列表生成NavLink时出现索引越界问题求助

Blazor Server的渲染机制中，for循环的索引变量i属于捕获变量。组件渲染时，循环内部的UI片段会延迟执行，当组件后续因状态变更、路由切换等原因重新渲染时，循环已经执行完毕，i的值会等于porturls.Count，此时访问porturls[i]就会触发索引越界错误。

用原生<a>标签或移除@porturls[i].name时未暴露问题，是因为前者的绑定逻辑不会延迟引用循环变量，后者则跳过了越界的索引访问。

推荐两种修复方式，都能继续使用NavLink组件：

方式1：改用foreach遍历列表 #

直接遍历porturls中的对象，彻底避开索引变量的捕获问题：

@foreach (var item in porturls)
{                        
    <li class="nav-item px-3">                               
           <NavLink class="nav-link" href="@item.url" Match="@NavLinkMatch.All">                            
                @item.name
           </NavLink>                                  
    </li>
}    

方式2：在for循环内定义局部变量捕获当前索引 #

如果必须保留for循环，在循环内部创建局部变量保存当前的i值，确保后续渲染时引用的是循环执行时的索引：

@for (int i = 0; i < porturls.Count; i++)
{
    var currentIndex = i;                        
    <li class="nav-item px-3">                               
           <NavLink class="nav-link" href="@porturls[currentIndex].url" Match="@NavLinkMatch.All">                            
                @porturls[currentIndex].name
           </NavLink>                                  
    </li>
}    

内容的提问来源于stack exchange，提问作者Hatzegopteryx