Blazor：回调函数修改Result属性时如何更新显示文本？

你的代码里，当通过外部回调修改Result属性时页面不会自动更新，核心原因是回调函数的执行不在Blazor组件的渲染上下文内，组件无法感知属性变化，因此不会触发UI重新渲染。下面是两种可靠的解决方式：

方式一：手动触发状态变更通知 #

在回调中修改Result后，调用StateHasChanged()方法通知组件状态已更新，触发UI重新渲染。如果回调可能在非UI线程执行（比如后台任务），建议用InvokeAsync()包裹，确保在组件的同步上下文内执行：

<p>The current value is: @Result </p>

@code {
    private string Result { get; set; } = "";

    protected override void OnInitialized()
    {
        OtherCode.OnResultChangedCB += async (string? newResult) => 
        {
            Result = newResult ?? "None";
            // 确保在组件上下文内触发更新，避免线程异常
            await InvokeAsync(StateHasChanged);
        };
        base.OnInitialized();
    }
}

方式二：提取回调方法并处理内存泄漏 #

如果回调会长期存在，记得在组件销毁时取消订阅，防止内存泄漏。可以把回调逻辑提取成单独的方法，方便后续移除：

<p>The current value is: @Result </p>

@code {
    private string Result { get; set; } = "";

    protected override void OnInitialized()
    {
        OtherCode.OnResultChangedCB += OnResultUpdated;
        base.OnInitialized();
    }

    private async void OnResultUpdated(string? newResult)
    {
        Result = newResult ?? "None";
        await InvokeAsync(StateHasChanged);
    }

    // 组件销毁时取消订阅
    public void Dispose()
    {
        OtherCode.OnResultChangedCB -= OnResultUpdated;
    }
}

关键说明 #

• StateHasChanged()：强制组件重新计算渲染树并更新UI，但仅在组件的同步上下文内调用才安全。
• InvokeAsync()：将状态变更操作调度到组件的同步上下文，避免跨线程访问UI元素导致的异常，在Blazor Server场景下尤其重要。

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