Blazor异步处理程序首次yield后组件未渲染问题求解

你的异步计数器代码中，点击按钮后无法实现每秒递增1的核心原因是：Blazor组件默认仅会在异步方法的第一个await之前和所有异步操作完成之后自动触发两次渲染，循环中每次currentCount的变更不会主动通知UI刷新，导致中间的9次增量要等10秒后才一次性显示。

要解决这个问题，只需要在每次更新状态后，主动通知Blazor组件触发渲染即可。推荐使用InvokeAsync(StateHasChanged)来确保线程安全（兼容Blazor Server和WebAssembly两种模式），修改后的代码如下：

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCountAsync">Click me</button>

@code {
    private int currentCount = 0;

    private async Task IncrementCountAsync()
    {
        for (int i = 0; i < 10; i += 1)
        {
            currentCount++;
            // 通知组件状态已变更，触发UI渲染
            await InvokeAsync(StateHasChanged);
            await Task.Delay(1000);
        }
    }
}

补充说明 #

• StateHasChanged方法会标记组件状态为已变更，Blazor会据此重新渲染组件；
• 在Blazor Server中，异步方法可能在后台线程执行，使用InvokeAsync可以确保StateHasChanged在UI线程调用，避免线程异常；
• 修改后，每次currentCount递增后都会立刻触发UI更新，就能实现每秒计数器加1的预期效果。

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