Blazor中FluentSlider循环生成标签显示异常求助

这是Blazor中循环变量捕获的典型问题：你在@for循环里直接使用循环变量i，但Blazor的渲染是异步的，所有生成的FluentSliderLabel都会绑定到同一个i引用。当循环结束时，i的值已经变成了256（因为最后一次i +=32后，i=256才不满足i<255的条件），所以所有标签都显示这个最终值。

修正方案 #

在循环内部声明一个局部变量，把当前的i值赋值给这个局部变量，让每个FluentSliderLabel绑定到各自的局部变量而非共享的循环变量：

<FluentSlider Min="0" Max="255" Step="1" @bind-Value=@SliderVal>
  <FluentSliderLabel Position="0" Style="font-size:20pt">
    0
  </FluentSliderLabel>
  @for(int i = 32; i < 255; i+=32) {
    // 声明局部变量捕获当前i的值
    var currentValue = i;
    <FluentSliderLabel Position="@currentValue" Style="font-size:16pt">
      @currentValue
    </FluentSliderLabel>
  }
  <FluentSliderLabel Position="255" Style="font-size:20pt">
    255
  </FluentSliderLabel>
</FluentSlider>

原理说明 #

通过创建currentValue这个局部变量，每次循环迭代都会生成一个独立的变量实例，保存当前迭代的i值。这样当Blazor异步渲染这些组件时，每个FluentSliderLabel都会引用各自的currentValue，而不是共享的循环变量i，就能正确显示对应的刻度值了。

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