You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Blazor C#组件间全局状态共享的反应性失效问题求助

解决Blazor组件间数据更新的反应性问题

问题根源

Blazor的组件渲染触发机制依赖引用类型的引用变化或值类型的值变化。你当前使用的List<WellReport>是引用类型,调用Add只是修改集合内容,并没有改变WellReports的引用,所以Blazor不会自动触发第二个组件的渲染。虽然全局状态定义了OnReportAdded事件,但第二个组件未订阅该事件来主动触发渲染更新。

修复方案

方案1:订阅全局状态事件触发组件刷新

修改第二个组件WellReports的代码,订阅OnReportAdded事件,在回调中调用StateHasChanged()通知组件重新渲染:

public partial class WellReports 
{
    [CascadingParameter] 
    public GlobalStateProvider globalStateProvider { get; set; }

    protected override void OnInitialized()
    {
        globalStateProvider.OnReportAdded += OnReportAdded;
        base.OnInitialized();
    }

    private void OnReportAdded()
    {
        StateHasChanged();
    }

    public void Dispose()
    {
        if (globalStateProvider != null)
        {
            globalStateProvider.OnReportAdded -= OnReportAdded;
        }
    }
}

方案2:用ObservableCollection替代List

将全局状态中的List<WellReport>替换为ObservableCollection<WellReport>,它会在集合内容变化时自动触发CollectionChanged事件,Blazor可直接感知变化:

  1. 修改全局状态:
public partial class GlobalStateProvider
{
    public ObservableCollection<WellReport> WellReports { get; private set; } = new ObservableCollection<WellReport>();

    public void AddReport(WellReport report)
    {
        WellReports.Add(report);
    }
}
  1. 第二个组件的MudTable直接绑定ObservableCollection即可,无需额外订阅事件:
<MudTable Items="@globalStateProvider.WellReports">
    <!-- 原有模板内容保持不变 -->
</MudTable>

注意事项

  • 方案1需在组件销毁时取消事件订阅,避免内存泄漏。
  • 方案2更适合频繁修改集合的场景,无需手动管理事件,代码更简洁。

内容的提问来源于stack exchange,提问作者Angel Gabriel Chable Concepcio

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.20 22:14:58