如何在Blazor Razor页面实现接口中调用StateHasChanged更新UI？

核心问题分析 #

出现「The render handle is not yet assigned」错误，是因为组件还未完成初始化（渲染句柄未绑定）时就调用了StateHasChanged()；另外，MistralAI流式API的响应处理可能在后台线程执行，直接更新UI会跨线程，导致UI无法刷新。

具体解决步骤 #

1. 延迟观察者注册到组件初始化完成后 #

在组件的OnInitializedAsync生命周期方法中注册观察者，此时组件的渲染句柄已经分配完成，避免未就绪时接收通知。同时实现IDisposable接口，在组件销毁时取消注册，防止内存泄漏。

2. 用InvokeAsync包装UI更新逻辑 #

Blazor要求UI更新必须在UI线程执行，流式API的响应处理通常在后台线程，因此需要用InvokeAsync将更新逻辑调度到UI线程，同时在内部检查RenderHandle.IsInitialized确保安全调用StateHasChanged()。

完整代码示例 #

public partial class ChatPage : ComponentBase, IReader, IDisposable
{
    [Inject]
    private IMyService MyService { get; set; } = null!;

    // 绑定到UI的响应内容
    private string ResponseContent { get; set; } = string.Empty;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        // 组件初始化完成后再注册观察者
        MyService.RegisterReader(this);
    }

    public void UpdateWords(string newWord)
    {
        // 调度到UI线程执行更新
        InvokeAsync(() =>
        {
            // 确保渲染句柄已初始化
            if (RenderHandle.IsInitialized)
            {
                ResponseContent += newWord;
                // 通知组件更新UI
                StateHasChanged();
            }
        });
    }

    public void Dispose()
    {
        // 组件销毁时取消注册，避免内存泄漏
        MyService.UnregisterReader(this);
    }
}

额外注意事项 #

• 确保IMyService的生命周期设置为Scoped（与Blazor组件生命周期匹配），如果是Singleton服务，需要自行处理线程安全问题，比如用线程安全的集合管理观察者列表。
• 流式API的响应处理逻辑中，确保每收到一段内容就及时通知观察者，避免批量延迟更新导致UI不流畅。

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