Blazor中列表属性更新后UI未同步问题求助

核心问题在于服务中的数据变更无法直接触发组件UI更新，你之前尝试的StateHasChanged()在服务中调用无效（它是组件实例的专属方法），EventCallback也没有正确绑定到组件的更新逻辑。结合你的场景，给出以下可行方案：

1. 让数据模型实现INotifyPropertyChanged #

普通类的属性变更不会被Blazor组件感知，需要通过接口触发属性变更通知：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class Foo : INotifyPropertyChanged
{
    private string _title = "";
    private bool _isComplete;

    public string Title
    {
        get => _title;
        set => SetField(ref _title, value);
    }

    public bool IsComplete
    {
        get => _isComplete;
        set => SetField(ref _isComplete, value);
    }

    public event PropertyChangedEventHandler? PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    protected bool SetField<T>(ref T field, T value, [CallerMemberName] string? propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(field, value)) return false;
        field = value;
        OnPropertyChanged(propertyName);
        return true;
    }
}

2. 在状态服务中定义变更事件 #

让AppStateService通过事件通知外部（组件）数据已变更：

public class AppStateService
{
    public List<Foo> Items { get; } = new()
    {
        new() { Title = "Title 1" },
        new() { Title = "Title 2" }
    };

    // 定义数据变更事件
    public event Action? ItemUpdated;

    public void Complete(int itemIndex)
    {
        if (itemIndex >= 0 && itemIndex < Items.Count)
        {
            Items[itemIndex].IsComplete = true;
            // 触发事件，通知订阅者
            ItemUpdated?.Invoke();
        }
    }
}

3. 组件订阅事件并触发UI更新 #

在UI组件中订阅AppStateService的变更事件，收到通知后调用自身的StateHasChanged()：

@inject AppStateService AppState
@inject MyService MyService
@implements IDisposable

@foreach(Foo item in AppState.Items)
{
    <div>@item.IsComplete - @item.Title</div>
}

<button type="button" @onClick="MarkItemComplete">Complete Me</button>

@code {
    protected override void OnInitialized()
    {
        // 订阅服务的变更事件
        AppState.ItemUpdated += UpdateUi;
    }

    private void MarkItemComplete()
    {
        MyService.MarkFirstItemAsComplete();
    }

    private void UpdateUi()
    {
        // 触发组件UI更新
        StateHasChanged();
    }

    public void Dispose()
    {
        // 取消订阅，避免内存泄漏
        AppState.ItemUpdated -= UpdateUi;
    }
}

4. 修正MyService的调用逻辑 #

确保MyService正确调用AppStateService的方法：

public class MyService
{
    private readonly AppStateService _appState;

    public MyService(AppStateService appState)
    {
        _appState = appState;
    }

    public void MarkFirstItemAsComplete()
    {
        _appState.Complete(0);
    }
}

关键检查点 #

• 确保服务注册正确：在Program.cs中注册AppStateService和MyService为Scoped或Singleton，保证组件和服务拿到的是同一个实例：

  builder.Services.AddScoped<AppStateService>();
  builder.Services.AddScoped<MyService>();
  

• 不要在服务中直接调用组件的StateHasChanged()，必须通过事件通知组件自行触发更新，这是Blazor组件模型的核心规则。
• 如果是Server-Side Blazor，确认没有因为Circuit重建导致实例不一致（Scoped服务默认按Circuit隔离，一般不会有问题）。

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