为什么Blazor输入字段在for循环防越界时仍报索引越界错误

问题根因 #

你遇到的索引越界是Blazor开发中for循环的经典闭包捕获问题：循环体内的@bind绑定捕获的是迭代变量i本身，而非每次循环的当前值。当页面渲染完成或者绑定更新触发时，i已经被累加为elem.PaintsUsed.Count，此时访问elem.PaintsUsed[i]就会超出列表索引范围。

修复方案 #

在for循环内部声明一个局部变量，存储当前迭代的索引值，所有引用索引的位置替换为该局部变量即可。同时你现有代码中存在datalist id重复的问题，同一个页面内id不能重复，否则会导致输入框下拉匹配异常，也建议同步修复。

修复后的代码如下：

@foreach (var elem in newMini.Elements)
{
    <div class="@elem.Name">
        <InputText @bind-Value="elem.Name" placeholder="Element name" />
        @for (int i = 0; i < elem.PaintsUsed.Count; i++)
        {
            // 每次循环声明独立的局部变量捕获当前索引，避免闭包问题
            var currentIdx = i;
            <div class="@elem.PaintsUsed[currentIdx]">
                index: @currentIdx of count: @elem.PaintsUsed.Count 
                <input type="text"
                       list="paint-search-@elem.GetHashCode()-@currentIdx"
                       placeholder="Search from @allPaints.Count() paints!"
                       @bind="@elem.PaintsUsed[currentIdx]" />
                <datalist id="paint-search-@elem.GetHashCode()-@currentIdx">
                    @foreach (var paint in allPaints)
                    {
                        <option>@paint.PaintName</option>
                    }
                </datalist>
            </div>
        }
        @if (!String.IsNullOrWhiteSpace(elem.Name))
        {
            <button type="button" @onclick="() => AddPaintToElement(elem)">
                Add Paint To Element
            </button>
        }
    </div>
}

补充说明 #

每次循环声明的currentIdx是当前迭代独有的局部变量，闭包捕获的是该次迭代的独立值，不会被后续循环的索引累加影响，即可彻底解决索引越界问题。如果你没有给elem设置唯一标识，用GetHashCode()临时生成唯一后缀可以解决id重复问题，生产环境建议替换为elem的业务唯一ID。

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