Blazor Telerik项目中IEnumerable属性API调用后为空的问题

核心原因 #

Blazor组件渲染流程中，UI会在OnInitialized（尤其是异步版本）完成前执行首次渲染，此时未初始化的Users属性为null，直接绑定就会触发System.NullReferenceException。

具体解决办法 #

1. 给Users属性初始化默认空集合 #

在组件类里直接给Users赋初始值，从根源避免null状态：

// 初始化时赋值空集合，而非默认null
public IEnumerable<UvwUser> Users = Enumerable.Empty<UvwUser>();

即使API请求还未完成，UI绑定的也是一个空集合，不会触发空引用。

2. 使用异步生命周期方法OnInitializedAsync #

如果API调用是异步的，必须用异步生命周期方法，确保等待数据加载完成后再更新UI：

protected override async Task OnInitializedAsync()
{
    // 调用API获取数据
    var apiResponse = await HttpClient.GetFromJsonAsync<List<UvwUser>>("your-api-endpoint");
    // 排序后赋值，同时处理API返回null的情况
    Users = apiResponse?.OrderBy(u => u.Surname).ThenBy(u => u.Forename) ?? Enumerable.Empty<UvwUser>();
}

注意：禁止在同步的OnInitialized里调用异步方法（比如用.Result），这会导致线程阻塞和渲染异常。

3. UI层添加空值检查 #

在渲染用户列表的地方，用@if判断Users状态，或者使用空合并运算符：

<!-- 方式1：先判断再渲染，同时展示加载提示 -->
@if (Users != null)
{
    <TelerikGrid Data="@Users">
        <GridColumns>
            <GridColumn Field="@nameof(UvwUser.Forename)" Title="名" />
            <GridColumn Field="@nameof(UvwUser.Surname)" Title="姓" />
            <GridColumn Field="@nameof(UvwUser.Username)" Title="用户名" />
        </GridColumns>
    </TelerikGrid>
}
else
{
    <p>加载用户数据中...</p>
}

<!-- 方式2：使用空合并运算符直接绑定空集合 -->
<TelerikGrid Data="@(Users ?? Enumerable.Empty<UvwUser>())">
    <!-- 列定义同上 -->
</TelerikGrid>

4. 利用Telerik组件的内置加载状态 #

Telerik Blazor组件（比如Grid）支持内置加载状态，可配合异步操作提升用户体验：

<TelerikGrid Data="@Users" Loading="@isLoading">
    <GridColumns>
        <GridColumn Field="@nameof(UvwUser.Forename)" Title="名" />
        <GridColumn Field="@nameof(UvwUser.Surname)" Title="姓" />
        <GridColumn Field="@nameof(UvwUser.Username)" Title="用户名" />
    </GridColumns>
</TelerikGrid>

@code {
    private bool isLoading;
    public IEnumerable<UvwUser> Users = Enumerable.Empty<UvwUser>();

    protected override async Task OnInitializedAsync()
    {
        isLoading = true;
        try
        {
            var apiResponse = await HttpClient.GetFromJsonAsync<List<UvwUser>>("your-api-endpoint");
            Users = apiResponse?.OrderBy(u => u.Surname).ThenBy(u => u.Forename) ?? Enumerable.Empty<UvwUser>();
        }
        finally
        {
            isLoading = false;
        }
    }
}

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