Blazor Server登录页面调用StateHasChanged后组件未重新渲染问题

问题场景 #

在Blazor Server项目中实现登录功能时，登录验证失败后设置了错误信息并调用StateHasChanged()，但组件并未重新渲染，错误信息无法显示。

原代码 #

Razor组件代码 #

<div class="row vh-100 align-items-center justify-content-center">
<div class="col-sm-8 col-md-6 col-lg-4 bg-white rounded p-4 shadow">
    <div class="row justify-content-center mb-4">
        <img src="Images/AQuity.png" class="w-50 h-50" />
    </div>
    <form>
        <div class="mb-4">
            <label for="email" style="text-align:left" class="form-label label-left w-100">Email Address</label>
            <input type="email" class="form-control form-control-sm" id="email" @bind=@_credential.Email />
        </div>
        <div class="mb-4">
            <label for="password" style="text-align:left" class="form-label label-left w-100">Password</label>
            <input type="password" class="form-control form-control-sm" id="password" @bind=@_credential.Password />
        </div>
        <button class="btn btn-warning btn-sm w-100" @onclick=Authenticate>Login</button>
    </form>
    <p class="mb-0 mt-2 text-center">Forgot Password? <a href="#" class="text-decoration-none">Reset Now!</a></p>
    @if (!_result.Success)
    {
        <p class="text-danger">@msg</p>
    }
</div>

代码后置类 #

public partial class Login
{
    [Inject]
    protected IAuthenticateService _authenticateService { get; set; }
    [Inject]
    protected NavigationManager Navigation { get; set; } = default!;
    private Credential _credential { get; set; } = new Credential();
    private ResultSet _result { get; set; } = new ResultSet();
    public string msg = string.Empty;
    private void Authenticate()
    {
        _result = _authenticateService.Authenticate(_credential);
        if (_result.Success)
        {
            Navigation.NavigateTo("");
        }
        else
        {
            msg = "new error !";
            this.StateHasChanged();
        }
    }
}

问题原因 #

1. 表单默认提交行为未阻止：点击登录按钮时，表单会触发默认HTTP提交，导致组件重新初始化，之前设置的错误信息被清空。
2. 字段变更未被检测：msg是公共字段，Blazor的变更检测系统对字段的敏感度低于属性，可能无法触发组件重新渲染。
3. 无效的StateHasChanged()调用：表单默认提交导致页面刷新，StateHasChanged()的调用被覆盖，无法生效。

解决方案 #

1. 阻止表单默认提交 #

在<form>标签上添加@onsubmit:preventDefault，避免表单提交导致组件重置：

<form @onsubmit:preventDefault>

2. 将错误信息改为属性 #

把public string msg = string.Empty改为私有属性，让Blazor能准确检测到状态变更：

private string Msg { get; set; } = string.Empty;

同时在Razor中更新引用：

<p class="text-danger">@Msg</p>

3. 优化登录逻辑 #

移除不必要的StateHasChanged()调用，优先使用认证服务返回的错误信息（如果ResultSet包含相关字段）：

private void Authenticate()
{
    _result = _authenticateService.Authenticate(_credential);
    if (_result.Success)
    {
        Navigation.NavigateTo("");
    }
    else
    {
        // 优先使用服务返回的错误信息，没有则用默认提示
        Msg = _result.ErrorMessage ?? "登录失败，请检查邮箱或密码是否正确";
    }
}

修改后的完整代码 #

Razor组件 #

<div class="row vh-100 align-items-center justify-content-center">
<div class="col-sm-8 col-md-6 col-lg-4 bg-white rounded p-4 shadow">
    <div class="row justify-content-center mb-4">
        <img src="Images/AQuity.png" class="w-50 h-50" />
    </div>
    <form @onsubmit:preventDefault>
        <div class="mb-4">
            <label for="email" style="text-align:left" class="form-label label-left w-100">Email Address</label>
            <input type="email" class="form-control form-control-sm" id="email" @bind=@_credential.Email />
        </div>
        <div class="mb-4">
            <label for="password" style="text-align:left" class="form-label label-left w-100">Password</label>
            <input type="password" class="form-control form-control-sm" id="password" @bind=@_credential.Password />
        </div>
        <button class="btn btn-warning btn-sm w-100" @onclick=Authenticate>Login</button>
    </form>
    <p class="mb-0 mt-2 text-center">Forgot Password? <a href="#" class="text-decoration-none">Reset Now!</a></p>
    @if (!_result.Success)
    {
        <p class="text-danger">@Msg</p>
    }
</div>

代码后置类 #

public partial class Login
{
    [Inject]
    protected IAuthenticateService _authenticateService { get; set; }
    [Inject]
    protected NavigationManager Navigation { get; set; } = default!;
    private Credential _credential { get; set; } = new Credential();
    private ResultSet _result { get; set; } = new ResultSet();
    private string Msg { get; set; } = string.Empty;

    private void Authenticate()
    {
        _result = _authenticateService.Authenticate(_credential);
        if (_result.Success)
        {
            Navigation.NavigateTo("");
        }
        else
        {
            Msg = _result.ErrorMessage ?? "登录失败，请检查邮箱或密码是否正确";
        }
    }
}

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