Blazor中为何将void改为async Task才能触发GUI刷新？

核心原因 #

版本1的同步方法里，状态变更被后续操作覆盖，且Blazor不会在同步方法执行中途触发渲染；版本2的异步方法通过await让Blazor有机会在中途渲染中间状态。

具体拆解 #

1. 同步方法的渲染逻辑
   Blazor在同步方法执行期间，会收集所有状态变更，但只有当整个方法执行完成后才会触发一次渲染。
   在版本1中，你先修改_userAnswer添加对错标记，紧接着调用AskQuestion()（推测该方法会重置_userAnswer为新的问题输入内容）。这两次状态变更在同一个渲染周期内，最终UI只会显示AskQuestion()执行后的状态，中间的对错标记根本没机会被渲染出来。

2. 异步方法的渲染逻辑
   当异步方法执行到await Task.Delay(1000)时，方法会暂时挂起，此时Blazor会立即处理渲染队列，触发一次UI渲染——这时候_userAnswer的对错标记就会显示在界面上。1秒延迟结束后，方法继续执行AskQuestion()，再次更新状态并触发第二次渲染，切换到新问题。

无需延迟的解决方案 #

如果不想依赖延迟，只需在修改_userAnswer后手动通知Blazor需要渲染当前状态，再执行后续操作：

private void ValidateButtonClicked()
{
    if (_userAnswer.Value == "") return;
    var iUserAnswer = int.Parse(_userAnswer.Value);
    var iAnswer = _questions[_questionNumber].Result;

    if (iUserAnswer == iAnswer)
    {
        _userAnswer = new MarkupString(_userAnswer.Value + "<span style='color:green'>✓</span>");
    }
    else
    {
        _userAnswer = new MarkupString(_userAnswer.Value + "<span style='color:red'>❌</span>");
    }

    StateHasChanged(); // 手动触发渲染，显示对错标记
    AskQuestion();
}

如果需要短暂显示对错标记再切换问题，可改成异步方法并搭配短延迟：

private async Task ValidateButtonClicked()
{
    // 前面逻辑不变
    StateHasChanged();
    await Task.Delay(500); // 显示0.5秒后切换
    AskQuestion();
}

补充说明 #

• 同步方法中，连续的状态变更只会以最后一次为准，因为Blazor只会在方法结束后统一渲染。
• await是异步方法的关键断点，它会让Blazor跳出当前方法执行流，优先处理UI渲染等任务，这也是版本2能显示中间状态的核心原因。

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