Blazor中基于下拉选值更新表格不生效问题排查

问题现象 #

切换下拉框选项时表格显示空白；再次选择其他成员时，表格会显示上一次选中成员的数据，出现明显的延迟错位。

前端代码 #

@if (_data is not null)
{
    <select class="form-control form-select" placeholder="Select a member" @onchange="MemberSelected">
    @foreach (var item in _data)
    {
        <option value="@item.IdMember">@item.MemberName</option>
    }
    </select>
}

@if(_selectedMember is not null)
{
    <h2>@_selectedMemberName</h2>
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>Tools</th>
                <th>Data point</th>
            </tr>
        </thead>
        <tbody>
            @if (_memberData is not null)
            {
                @foreach (var item in _memberData)
                {
                    <tr>
                        <td>
                            <a @onclick="() => Edit(item)"><i class="fa fa-pencil" /></a>&nbsp;
                            <a href="#" @onclick="() => Delete(item)"><i class="fa fa-trash" /></a>
                        </td>
                        <td>
                            @item.DataValue
                        </td>
                    </tr>
                }
            }
        </tbody>
    </table>
}

@code代码块 #

public string? _selectedMember{ get; set; }
private IEnumerable<MemberData>? _memberData = Array.Empty<SettingList>();
private async void MemberSelected(ChangeEventArgs e)
{
    if (e.Value is not null)
    {
        _selectedMember = (string)e.Value;

        var request = new HttpRequestMessage(HttpMethod.Get, "https://localhost:1234/api/getmemberdata/" + _selectedMember);

        var client = ClientFactory.CreateClient();
        var response = await client.SendAsync(request);

        if (response.IsSuccessStatusCode)
        {
            using var responseStream = await response.Content.ReadAsStreamAsync();
            _memberData = await JsonSerializer.DeserializeAsync<IEnumerable<MemberData>>(responseStream);
        }

        shouldRender = true;
    }
}

问题根源 #

1. 异步事件处理错误：使用async void作为事件方法返回值，Blazor框架无法追踪异步操作的完成状态，导致UI更新时机与数据变更不同步。
2. UI更新方式错误：直接设置shouldRender = true不是Blazor推荐的状态更新方式，这个字段是框架内部控制渲染的标志，手动修改会导致渲染逻辑混乱。
3. 初始化类型不匹配：_memberData声明为IEnumerable<MemberData>，但初始化用了Array.Empty<SettingList>()，存在类型不兼容问题，可能引发隐式转换错误。

修复方案 #

1. 修正异步方法返回类型 #

将async void改为async Task，让Blazor能正确追踪异步操作：

private async Task MemberSelected(ChangeEventArgs e)
{
    // 原逻辑保留，仅修改返回类型
}

2. 替换UI更新方式 #

用StateHasChanged()替代shouldRender = true，明确通知框架状态已变更：

if (response.IsSuccessStatusCode)
{
    using var responseStream = await response.Content.ReadAsStreamAsync();
    _memberData = await JsonSerializer.DeserializeAsync<IEnumerable<MemberData>>(responseStream);
}

StateHasChanged(); // 通知组件更新UI

3. 修正初始化类型 #

确保_memberData的初始化类型与声明一致：

private IEnumerable<MemberData>? _memberData = Array.Empty<MemberData>();

4. 可选：优化用户体验 #

发起请求前先清空旧数据，避免用户看到延迟的旧数据：

_selectedMember = (string)e.Value;
_memberData = Array.Empty<MemberData>(); // 清空旧数据
StateHasChanged(); // 立即更新UI

var request = new HttpRequestMessage(HttpMethod.Get, "https://localhost:1234/api/getmemberdata/" + _selectedMember);
// 后续请求逻辑

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