如何让CompB在CompA每次回调后更新？Blazor组件渲染问题

你的问题出在Blazor的异步渲染机制上：当在同一个异步方法上下文里连续触发状态变更时，Blazor会默认合并这些变更，只在整个方法执行完成后做一次统一渲染。所以CompA按钮点击后，两次OnEvent.InvokeAsync会同步完成，MainPage的HandleEvent虽然每次都调用StateHasChanged，但这些操作都被合并到同一批次的渲染中，导致你看不到"invocation one"的中间状态，直接显示最终的"invocation two"。

修复方案 #

方案一：在CompA中让出UI线程，允许中间渲染 #

修改CompA的OnButtonClick方法，在两次事件回调之间加入异步等待，让Blazor有机会渲染中间状态：

<button @onclick="OnButtonClick">Click Me</button>

@code {
    [Parameter] public EventCallback<string> OnEvent { get; set; }

    public async Task OnButtonClick()
    {
        await OnEvent.InvokeAsync("invocation one");
        // 让出UI线程，触发中间渲染
        await Task.Yield();

        //...这里可以执行你的业务逻辑，同步或异步都可以

        await OnEvent.InvokeAsync("invocation two");
    }
}

方案二：修改MainPage的回调方法为异步，确保每次状态变更后完成渲染 #

将MainPage的HandleEvent改为异步方法，并通过InvokeAsync等待状态变更后的渲染完成：

<CompA OnEvent="@HandleEvent"/>

<CompB Data="@Data"/>

@code {
    public string Data { get; set; }

    public async Task HandleEvent(string eventData) 
    {
        Data = eventData;
        // 触发状态变更并等待UI渲染完成
        await InvokeAsync(StateHasChanged);
    }
}

另外注意CompB代码里的语法错误：@bind-Value=@Data"应该修正为@bind-Value="@Data"，避免绑定失败。

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