Blazor WebAssembly组件调用WebApi加载数据后列表消失求助

我创建了ASP.NET Core MVC .NET 8应用，添加了可返回产品JSON列表的ProductController WebApi。随后在解决方案中加入Blazor WebAssembly独立应用，并将其中一个页面集成到ASP.NET Core应用中，希望通过该Blazor组件实现产品的富UI。使用RestSharp调用ProductController获取数据时，出现产品列表短暂显示后消失的异常；但使用模拟测试数据时一切正常，且已确认ProductController可正常返回JSON数据，请求协助解决该问题。

Blazor组件代码 #

@inject NavigationManager NavManager

<h3>Products</h3>

@if(_viewModel == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <ul>
        @foreach (var product in _viewModel.Products)
        {
            <li>@product.Name</li>
        }
    </ul>
    @if(_viewModel.Products.Count == 0)
    {
        <p><em>No products found</em></p>
    }
}

@code {
    private ProductIndexViewModel _viewModel;
    private IDataProviderFactory _dataProviderFactory;
    private IProductDataProvider _productDataProvider;

    protected override async Task OnInitializedAsync()
    {
        _dataProviderFactory = GetDataProviderFactory();
        _productDataProvider = _dataProviderFactory.CreateProductDataProvider();                
        _viewModel = await _productDataProvider.GetByGroupAndPageAsync(0, 1, 5);
    }

    private IDataProviderFactory GetDataProviderFactory()
    {
        return new RestDataProviderFactory(NavManager.BaseUri);
        //return new TestDataProviderFactory();
    }
}

RestSharp调用代码 #

public async Task<ProductIndexViewModel> GetByGroupAndPageAsync(int productGroupId, int pageNumber, int itemsPerPage)
{            
    string uri = $"{GetApiUri()}/GetByGroupAndPage/{productGroupId}/{pageNumber}/{itemsPerPage}";
    var request = new RestRequest(uri, Method.Get);
    var restResponse = await restClient.ExecuteGetAsync<ProductIndexViewModel>(request);
    if (restResponse.IsSuccessful)
    {
        ProductIndexViewModel viewModel = restResponse.Data;
        return viewModel;
    }
    return new ProductIndexViewModel();
}

可能的原因及解决方法 #

1. 组件重复初始化导致数据被重置 #

组件可能因父组件重渲染、页面刷新等原因多次执行OnInitializedAsync，第二次API请求失败返回空模型，覆盖了之前的有效数据。

• 解决方法：
  • 改用OnAfterRenderAsync结合firstRender参数，确保数据只加载一次：

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _dataProviderFactory = GetDataProviderFactory();
            _productDataProvider = _dataProviderFactory.CreateProductDataProvider();                
            _viewModel = await _productDataProvider.GetByGroupAndPageAsync(0, 1, 5);
            StateHasChanged();
        }
    }
    

  • 检查MVC页面是否存在意外回发（如表单提交），避免页面整体刷新导致组件重新加载。

2. RestSharp反序列化不匹配 #

API返回的JSON结构与ProductIndexViewModel类定义不匹配（如属性大小写、字段缺失），导致反序列化后Products集合为空。

• 解决方法：
  • 验证API返回的JSON格式，确保与ProductIndexViewModel的属性完全对应，开启大小写不敏感反序列化：

    if (restResponse.IsSuccessful)
    {
        var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
        var viewModel = JsonSerializer.Deserialize<ProductIndexViewModel>(restResponse.Content, options);
        return viewModel;
    }
    

  • 在代码中添加日志，输出restResponse.Data和restResponse.Content，确认反序列化结果是否正确。

3. 状态更新未触发UI刷新 #

获取数据后未手动通知Blazor状态变化，导致UI未保持最新状态，或后续状态变化覆盖了原有数据。

• 解决方法：
  • 在数据加载完成后调用StateHasChanged()：

    protected override async Task OnInitializedAsync()
    {
        _dataProviderFactory = GetDataProviderFactory();
        _productDataProvider = _dataProviderFactory.CreateProductDataProvider();                
        _viewModel = await _productDataProvider.GetByGroupAndPageAsync(0, 1, 5);
        StateHasChanged();
    }
    

4. BaseUri动态变化导致API请求错误 #

NavigationManager.BaseUri在组件生命周期中发生变化，导致后续API请求地址错误，返回空数据。

• 解决方法：
  • 初始化时保存BaseUri的静态副本，避免后续变化影响API地址：

    private readonly string _baseUri;
    
    public YourComponentName(NavigationManager navManager)
    {
        _baseUri = navManager.BaseUri;
    }
    
    private IDataProviderFactory GetDataProviderFactory()
    {
        return new RestDataProviderFactory(_baseUri);
    }
    

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