Blazor项目中遍历PullRequestModel集合报错及生成唯一Accordion标签ID的问题咨询

这个问题的核心是混淆了C#和JavaScript的集合长度属性，再加上Blazor for循环的闭包陷阱，下面一步步帮你解决：

1. 修正集合长度的错误 #

在C#里，List<T>类型的长度属性是Count，而非JavaScript里的length。你的result.value是List<Value>类型，所以必须用result.value.Count来获取集合长度，替换掉错误的.length引用。

2. 避免Blazor for循环的闭包陷阱 #

直接在Blazor的for循环中使用循环变量key会踩坑：所有渲染出来的组件都会引用同一个变量的最终值，导致所有Accordion的交互逻辑混乱。所以需要在循环内部创建一个局部变量，捕获当前迭代的索引值，确保每个组件拿到的都是独立的索引。

3. 生成唯一的Accordion ID #

利用捕获到的局部索引值，生成类似tab@localKey的唯一ID，同时让label的for属性和checkbox的id一一对应，解决ID重复的问题。

修正后的完整代码 #

@if(result == null) { 
    <p> No pull requests found</p> 
} else { 
    @for (var key = 0; key < result.value.Count; key++) {
        // 创建局部变量固定当前迭代的索引
        var localKey = key;
        var currentItem = result.value[localKey];
        <div class="accordion"> 
            <input type="checkbox" id="tab@localKey"> 
            <label class="accordion-label" for="tab@localKey"> @currentItem.title </label> 
            <div class="accordion-content"> 
                <WorkItems PersonalAccessToken="@PersonalAccessToken" WorkItemUrl="@currentItem._links.workItems.href"></WorkItems> 
            </div> 
        </div> 
    } 
}

额外说明 #

• 局部变量localKey的作用是锁定当前循环的索引值，避免Blazor渲染时因闭包特性导致所有组件共享同一个key变量的最终值。
• 生成的ID会是tab0、tab1、tab2...这样的唯一值，完美解决了之前所有标签ID重复的问题。
• 直接通过result.value[localKey]获取当前项，代码逻辑更直观清晰。

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