Blazor WASM 集合变更时导航菜单如何实现实时刷新

Blazor 默认只会在组件自身触发的UI交互事件（比如组件内按钮点击、输入框输入）执行完成后，自动调用 StateHasChanged() 完成组件重渲染。
你当前的逻辑是通过单例服务的事件来修改导航组件的 Items 集合，这类由外部服务触发的状态变更，不在Blazor的自动渲染检测范围内，因此修改完成后组件不会主动刷新DOM，新增的列表项只会等到下一次有其他交互触发导航组件重渲染时才会显示。

适配现有代码的快速修复 #

直接在导航组件的事件回调方法里，手动触发组件重渲染即可，改动量最小：
找到导航组件中处理 NewPlanAdded 的方法，按如下修改：

private void NewPlanAdded()
{
    Items.Add(new Tuple<string, string, string>("plan", "oi oi-plus", "Plan (unsaved)"));
    // 切回组件同步上下文后通知重渲染
    InvokeAsync(StateHasChanged);
}

注意：必须用 InvokeAsync 包裹 StateHasChanged 调用，因为单例事件的触发上下文可能和Blazor组件的渲染上下文不一致，直接调用会引发线程上下文异常。

更适合长期维护的优化方案 #

如果后续导航菜单的动态变更逻辑会越来越复杂，可以把列表状态直接托管到单例服务中，使用自带变更通知的集合替代裸的事件：

1. 改造 StateManager，直接维护导航项集合：

   public class StateManager
   {
       // 自带集合变更通知的可观察集合
       public ObservableCollection<Tuple<string, string, string>> NavItems { get; } = new();
       
       public void AddPlan()
       {
           NavItems.Add(new Tuple<string, string, string>("plan", "oi oi-plus", "Plan (unsaved)"));
       }
   }
   

2. 导航组件直接绑定单例中的集合，在初始化时订阅集合的变更事件，变更触发时同样调用 StateHasChanged 刷新即可，不需要在组件内部额外维护重复的列表状态。

现有代码可保留的正确逻辑 #

你在导航组件 Dispose 方法中取消单例事件订阅的写法是正确的，可以有效避免组件销毁后仍被事件回调持有造成的内存泄漏，不需要修改。

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