Blazor WebAssembly如何修改循环内声明变量并触发UI刷新？

问题根因 #

• 你代码中定义的theBool是foreach循环内部的局部临时变量，Blazor每次触发UI重渲染时都会重新执行整个循环逻辑，theBool会被强制重置为初始值false，之前点击修改的状态会直接丢失。
• 循环内部的局部变量修改不会主动触发Blazor的重渲染机制，就算值发生了变化UI也不会同步更新。

正确实现方案 #

你不需要为每个列表项单独声明变量，只需要在@code块中新增一个字典存储每个项的布尔状态即可，维护成本极低，完全适配动态列表场景：

基础切换场景代码

<ul>
    @foreach (var item in myList)
    {
        <li>
            <span>For @item, theBool is @stateDict[item]</span>
            (<a @onclick:preventDefault @onclick="@(() => stateDict[item] = !stateDict[item])">Reverse bool for @item</a>)
        </li>
    }
</ul>

@code {
    List<string> myList = new() { "item1", "item2", "item3", "item4", "item5" };
    // 存储每个列表项对应的布尔状态
    Dictionary<string, bool> stateDict { get; set; }

    protected override void OnInitialized()
    {
        stateDict = myList.ToDictionary(x => x, x => false);
    }
}

子组件参数传递场景代码

适配你更新后需要控制子组件参数的需求，直接把字典值传给组件参数即可：

<ul>
    @foreach (var item in myList)
    {
        <li>
            <a @onclick:preventDefault @onclick="@(() => stateDict[item] = !stateDict[item])">Show/Hide details</a>
            <MyCoolComponent DisplayDetails="@stateDict[item]"></MyCoolComponent>
        </li>
    }
</ul>

注意：给a标签加@onclick:preventDefault是为了阻止a标签默认的跳转刷新行为，避免页面状态被重置。

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