Blazor WebAssembly中在for循环内使用FluentBadge组件触发数组索引越界错误

数据老陈

2026-4-8

嘿，我来帮你解决这个头疼的索引越界问题！你在Blazor WebAssembly里用for循环渲染FluentBadge时遇到的这个错误，其实是Blazor渲染机制里一个很常见的小陷阱，很多人刚接触的时候都会踩中。

问题原因

为啥会触发这个错误呢？这和Blazor的异步渲染机制有关：你用for循环时，循环变量i是在整个循环范围内共享的变量。当循环快速执行完毕后，i的值会变成Stuff.Length（也就是7），但此时FluentBadge组件可能还没完成渲染或后续的更新操作。当组件真正去访问Stuff[i]时，数组的最大有效索引是6，自然就触发了“索引超出数组范围”的异常。

解决方案

这里有两种简单有效的方法可以解决这个问题：

方法一：在循环内创建局部变量捕获当前索引

在每次循环迭代中，把当前的i值赋值给一个局部变量，这样每个组件都会捕获到当前迭代的独立索引值，不会被后续循环覆盖：

@page "/"
<ol>
    @for (int i = 0; i < Stuff.Length; i++)
    {
        var currentIndex = i; // 用局部变量捕获当前循环的索引
        <li><FluentBadge Appearance="Appearance.Neutral">@Stuff[currentIndex]</FluentBadge></li>
    }
</ol>
@code {
    private byte[] Stuff = new byte[] {1,2,3,4,5,6,7};
}

方法二：改用foreach循环遍历元素

如果你的场景只需要使用数组里的元素值，完全可以直接用foreach循环遍历数组，这样就彻底避开了索引的问题，代码也更简洁直观：

@page "/"
<ol>
    @foreach (var item in Stuff)
    {
        <li><FluentBadge Appearance="Appearance.Neutral">@item</FluentBadge></li>
    }
</ol>
@code {
    private byte[] Stuff = new byte[] {1,2,3,4,5,6,7};
}