Blazor页面重复渲染异常：加载后按钮消失并显示Loading

我基于Blazor的InteractiveServer模式开发了车辆详情页，路由为/Car/Details/{carId}，页面继承自CarBase。调用CarBase中的GetCarDetails方法可正确获取Car数据并完成初始渲染，但页面会再次重渲染，此时h4、h6文本仍显示，但按钮消失，转而显示Loading状态，请求技术帮助。

相关代码 #

@page "/Car/Details/{carId}"
@rendermode InteractiveServer
@inherits CarBase
@using BlazorApp.Components.Pages.Cars.Services
@inject IJSRuntime JS

@code {
    protected override async Task OnInitializedAsync()
    {
        if (Car == null)
        {
            await GetCarDetails();
        }
    }
}

<PageTitle>Car</PageTitle>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            @if (Car!= null)
            {
                <div class="card-header">
                    <h4>@Car.Name</h4>
                    <h6>@Car.Name is @Car.Status</h6>
                    <button class="btn btn-primary" @disabled="@Car.IsSold">Mark Sold</button>
                    <button class="btn btn-primary" @disabled="@Car.IsRented">Rent Car</button>
                </div>
            }
            else
            {
                <div class="card">
                    <div class="card-body">
                        <p>Loading...</p>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

可能原因及解决方案 #

1. Car对象状态未正确维护 #

检查CarBase中的Car属性是否为可触发状态变更的绑定属性。如果Car只是普通字段，或者赋值时未调用StateHasChanged()，会导致组件状态不同步。修改CarBase中的Car属性定义：

private Car? _car;
public Car? Car
{
    get => _car;
    protected set
    {
        if (_car != value)
        {
            _car = value;
            StateHasChanged();
        }
    }
}

2. 路由参数处理时机错误 #

OnInitializedAsync仅在组件首次初始化时执行，而InteractiveServer模式下组件可能因参数变更重新渲染。改用OnParametersSetAsync处理数据加载，确保路由参数变更时重新校验：

protected override async Task OnParametersSetAsync()
{
    // 假设CarBase中已定义[Parameter] public string? CarId { get; set; }
    if (!string.IsNullOrEmpty(CarId) && (Car == null || !Car.Id.Equals(CarId)))
    {
        await GetCarDetails();
    }
}

3. 静态渲染与交互式渲染的状态冲突 #

InteractiveServer模式下，组件先进行静态服务器渲染，再建立SignalR连接进入交互式模式。如果静态渲染时Car有值，但交互式初始化时Car未正确加载，会导致内容切换。可在OnAfterRenderAsync中处理交互式加载：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // 确保仅在交互式连接建立后加载数据
        await GetCarDetails();
    }
}

4. 异步加载的竞态问题 #

添加加载状态标记，避免多次调用GetCarDetails导致Car被意外重置：

private bool _isLoading;

protected override async Task OnParametersSetAsync()
{
    if (_isLoading || Car != null) return;
    
    _isLoading = true;
    try
    {
        await GetCarDetails();
    }
    finally
    {
        _isLoading = false;
    }
}

同时修改UI逻辑，优先判断加载状态：

@if (_isLoading)
{
    <div class="card">
        <div class="card-body">
            <p>Loading...</p>
        </div>
    </div>
}
else if (Car != null)
{
    <div class="card-header">
        <h4>@Car.Name</h4>
        <h6>@Car.Name is @Car.Status</h6>
        <button class="btn btn-primary" @disabled="@Car.IsSold">Mark Sold</button>
        <button class="btn btn-primary" @disabled="@Car.IsRented">Rent Car</button>
    </div>
}

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