Blazor异步操作中StateHasChanged后UI不刷新的问题及优化需求

关键问题修复步骤 #

1. 重构数据模型的异步逻辑与通知机制 #

原代码的异步方法存在任务未启动、同步阻塞等问题，需要实现属性变化通知让Blazor感知状态更新：

using System.Collections.Generic;
using System.Linq;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Threading.Tasks;

namespace Example.Model
{
    public class Foo
    {
        public string Data { get; set; }
        public Foo() { Data = "bar"; }
    }

    public class FooCollection : INotifyPropertyChanged
    {
        public int Count => _foos.Count;
        
        private string? _result;
        public string? Result 
        { 
            get => _result; 
            private set 
            {
                if (_result != value)
                {
                    _result = value;
                    OnPropertyChanged();
                }
            }
        }

        private List<Foo> _foos;
        public FooCollection() 
        { 
            _foos = new List<Foo>() { new Foo() };
            Result = _foos.Single().Data;
        }

        public IList<Foo> GetFoos() { return _foos; }

        // 同步方法（保留但建议替换为异步）
        public void CreateFooAt(int index)
        {
            _foos.Insert(index, new Foo());
            UpdateResult();
        }

        public void RemoveFooAt(int index)
        {
            _foos.RemoveAt(index);
            UpdateResult();
        }

        // 修复后的异步方法
        public async Task CreateFooAtAsync(int index)
        {
            _foos.Insert(index, new Foo());
            OnPropertyChanged(nameof(Count)); // 通知集合数量变化
            await UpdateResultAsync();
        }

        public async Task RemoveFooAtAsync(int index)
        {
            _foos.RemoveAt(index);
            OnPropertyChanged(nameof(Count));
            await UpdateResultAsync();
        }

        // 异步耗时操作，替换同步阻塞
        private async Task UpdateResultAsync()
        {
            Result = null; // 触发加载状态
            await Task.Delay(1000); // 模拟异步耗时计算
            Result = _foos.Select(f => f.Data).Aggregate((a, b) => a + ", " + b);
        }

        // INotifyPropertyChanged实现，用于通知Blazor状态更新
        public event PropertyChangedEventHandler? PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string? propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

2. 优化Blazor组件的UI刷新逻辑 #

组件订阅数据模型的属性变化事件，自动触发UI刷新，无需手动调用StateHasChanged：

@using Example.Model
@implements IDisposable

@for (int i = 0; i < foos.Count; i++)
{
    int iCopy = i;
    var foo = foos.GetFoos()[i];
    <div class="row">
        <div class="col-3">
            <div class="btn-group" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-primary" @onclick="@(() => InsertFooAt(iCopy))">Insert above</button>
                <button type="button" class="btn btn-primary" @onclick="@(() => RemoveFooAt(iCopy))">Delete</button>
                <button type="button" class="btn btn-primary" @onclick="@(() => InsertFooAt(iCopy+1))">InsertBelow</button>
            </div>
        </div>
        <div class="col-3">
            <div class="btn-group" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-primary" @onclick="@(() => InsertFooAtAsync(iCopy))">Insert above async</button>
                <button type="button" class="btn btn-primary" @onclick="@(() => RemoveFooAtAsync(iCopy))">Delete async</button>
                <button type="button" class="btn btn-primary" @onclick="@(() => InsertFooAtAsync(iCopy+1))">InsertBelow async</button>
            </div>
        </div>
        <div class="col-6">
            <input type="text" class="form-control" @bind-value="@foo.Data"/>
        </div>
    </div>
}

@if (foos.Result == null)
{
    <div class="spinner-border" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
}
else
{
    <span class="border-success">@foos.Result</span>
}

@code {
    FooCollection foos = new FooCollection();

    protected override void OnInitialized()
    {
        // 订阅属性变化事件，自动触发UI刷新
        foos.PropertyChanged += (sender, e) => InvokeAsync(StateHasChanged);
        base.OnInitialized();
    }

    void InsertFooAt(int index)
    {
        foos.CreateFooAt(index);
    }

    void RemoveFooAt(int index)
    {
        foos.RemoveFooAt(index);
    }

    async Task InsertFooAtAsync(int index)
    {
        await foos.CreateFooAtAsync(index);
    }

    async Task RemoveFooAtAsync(int index)
    {
        await foos.RemoveFooAtAsync(index);
    }

    // 取消订阅避免内存泄漏
    public void Dispose()
    {
        foos.PropertyChanged -= (sender, e) => InvokeAsync(StateHasChanged);
    }
}

核心问题解析 #

1. 异步方法错误：原代码使用new Task(() => UpdateResult())但未启动任务，导致await永远无法完成，改用异步方法+Task.Delay实现非阻塞耗时操作。
2. UI刷新失效：通过实现INotifyPropertyChanged接口，让数据模型的属性变化主动通知组件，替代手动调用StateHasChanged的不可靠方式。
3. 加载状态不显示：在异步计算前将Result设为null，同时触发属性变化通知，让UI立即显示加载状态，计算完成后再更新Result展示最终结果。
4. 集合列表更新：修改集合后主动触发Count属性的变化通知，让组件的for循环重新渲染最新的集合元素。

额外优化建议 #

• 将List<Foo>替换为ObservableCollection<Foo>，集合元素增删时自动通知组件，无需手动触发Count变化。
• 同步方法建议全部替换为异步实现，彻底避免UI线程阻塞。

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