Blazor Razor页面调用StateHasChanged无法更新@if条件渲染问题

问题根因 #

你在SpaceSelected方法内部使用int NumOfSelectedValue = ...的写法，创建了和Razor模板绑定的组件全局字段/属性同名的局部变量，局部变量的赋值不会修改组件层面绑定的原值，因此即使触发状态更新，判断条件依赖的属性值没有发生变化，渲染结果自然不会更新。

解决步骤 #

1. 首先确认你在组件的@code块中已经声明了全局的NumOfSelectedValue字段/属性，示例如下：

@code {
    // 全局绑定用的属性，不要在方法内部重新声明
    public int NumOfSelectedValue { get; set; }
    // 其他字段比如SelectedCell的声明省略
}

2. 修改SpaceSelected方法的赋值逻辑，去掉赋值前的类型声明，直接给全局属性赋值：

public void SpaceSelected()
{
    // 去掉前面的int，避免创建局部变量，直接修改全局属性
    NumOfSelectedValue = SelectedCell.Count(x => x == ' ');
    Console.WriteLine(NumOfSelectedValue);
    
    // 普通UI触发的事件回调Blazor会自动调用StateHasChanged，无需手动写
    // 只有非UI线程触发的更新才需要手动调用InvokeAsync(StateHasChanged)
}

可选优化 #

你Razor模板中的条件判断可以简化，不需要多余的else if判断：

@if (NumOfSelectedValue <= 1)
{
    <input class="form-control-sm" value="1" style="width: 40px" disabled />
}
else
{
    <input class="form-control-sm" value="@NumOfSelectedValue" style="width: 40px" />
}

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