Blazor提交表单后UI未即时更新，仅失焦其他元素才刷新如何解决？

问题根因 #

你遇到的UI延迟渲染问题核心是两个错误导致的：

• 事件回调方法使用了async void返回值，Blazor无法跟踪异步操作的完成状态，不会在异步逻辑执行完后自动触发UI重绘
• StateHasChanged()的调用时机错误，你在修改状态变量前就调用了该方法，调用时状态仍为旧值，无法渲染更新后的提示UI

修复步骤 #

1. 修改回调方法返回值 #

将AddUserToProject的返回值从void改为Task，Blazor会自动跟踪异步Task的执行状态，在异步逻辑完成后自动触发UI刷新，大部分场景下无需手动调用StateHasChanged()

// 修改前
private async void AddUserToProject()
// 修改后
private async Task AddUserToProject()

2. 调整状态修改与StateHasChanged()的顺序 #

如果需要保留手动调用StateHasChanged()的逻辑，务必放在状态变量修改完成之后：

// 尝试添加的用户已在项目中
if (response.StatusCode == HttpStatusCode.Forbidden)
{
    // 先改状态
    userNotFoundError = false;
    userExistsAlready = true;
    // 再调用重绘（改完方法返回Task后可省略此步）
    StateHasChanged();
}
// 尝试添加的用户不存在
else if (response.StatusCode == HttpStatusCode.BadRequest)
{
    userExistsAlready = false;
    userNotFoundError = true;
    StateHasChanged();
}

3. 补全异常处理的状态同步 #

catch块中修改状态后也需要确保UI可感知，修改方法返回值为Task后框架会自动处理，无需额外操作。

修复后完整业务方法参考 #

private bool userNotFoundError = false;
private bool userExistsAlready = false;
private async Task AddUserToProject()
{
    try
    {
        var response = await Http.PutAsJsonAsync($"Projects/add/User/{AssignUser.UserName}/{projectItem.ProjectId}", AssignUser);

        // 尝试添加的用户已在项目中
        if (response.StatusCode == HttpStatusCode.Forbidden)
        {
            userNotFoundError = false;
            userExistsAlready = true;
        }
        // 尝试添加的用户不存在
        else if (response.StatusCode == HttpStatusCode.BadRequest)
        {
            userExistsAlready = false;
            userNotFoundError = true;
        }
        else
        {
            var content = await response.Content.ReadAsStringAsync();
            var userobject = JsonConvert.DeserializeObject<ApplicationUser>(content);
            response.EnsureSuccessStatusCode();
            Navigation.NavigateTo("/projects");
            userNotFoundError = false;
            userExistsAlready = false;
        }

    }
    catch (Exception e)
    {
        userNotFoundError = true;
        userExistsAlready = false;
    }
}

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