Blazor Telerik Scheduler中OnInitializedAsync数据加载空值报错问题

一、解决Scheduler的HolidayPlanners空引用问题 #

你的推测成立：Blazor Server预渲染模式下，UI会先于异步数据加载完成渲染，导致Scheduler绑定的HolidayPlanners为null触发报错。可通过以下方式修复：

1. 初始化时给集合赋空默认值
   修改HolidayPlanners定义，避免初始状态为null：

IEnumerable<UvwHolidayPlanner> HolidayPlanners { get; set; } = Enumerable.Empty<UvwHolidayPlanner>();

2. 添加加载状态，延迟渲染Scheduler
   在组件中加入加载标记，确保数据加载完成后再渲染Scheduler：

@if (IsLoading)
{
    <div class="loading">加载中...</div>
}
else
{
    <TelerikScheduler Data="@HolidayPlanners" @bind-Date="@StartDate" @bind-View="@selectedView" Height="100%" Class="Scheduler" OnCreate="@AddAppointment" 
                  OnUpdate="@UpdateAppointment" OnDelete="@DeleteAppointment"
                  AllowCreate="true" AllowDelete="true" AllowUpdate="true"
                  IdField="@(nameof(UvwHolidayPlanner.Pk))"
                  StartField="@(nameof(UvwHolidayPlanner.StartDate))"
                  EndField="@(nameof(UvwHolidayPlanner.EndDate))"
                  TitleField="@(nameof(UvwHolidayPlanner.Title))"
                  DescriptionField="@(nameof(UvwHolidayPlanner.Description))"
                  IsAllDayField="@(nameof(UvwHolidayPlanner.IsAllDay))"
                  RecurrenceRuleField="@(nameof(UvwHolidayPlanner.RecurrenceRule))"
                  RecurrenceExceptionsField="@(nameof(UvwHolidayPlanner.RecurrenceExceptions))"
                  RecurrenceIdField="@(nameof(UvwHolidayPlanner.RecurrenceFk))">
        <SchedulerViews>
            <SchedulerMonthView></SchedulerMonthView>
        </SchedulerViews>
    </TelerikScheduler>
}

@code {
    private bool IsLoading = true;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            _URL = settingsAccessor.AllClientSettings().BaseServiceURI;
            var data = await http.CreateClient("ClientSettings").GetFromJsonAsync<List<UvwHolidayPlanner>>($"{_URL}/lookup/HolidayPlanner");
            HolidayPlanners = data?.OrderBy(t => t.Title).ToList() ?? Enumerable.Empty<UvwHolidayPlanner>();
        }
        catch (Exception ex)
        {
            // 可添加日志记录或前端错误提示
        }
        finally
        {
            IsLoading = false;
        }
    }

    // 其余原有代码保持不变
}

3. 跳过预渲染阶段的数据加载
   若使用ServerPrerendered模式，预渲染阶段可能无法访问内部API，可将数据加载逻辑移至OnAfterRenderAsync（预渲染不会执行该方法）：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        _URL = settingsAccessor.AllClientSettings().BaseServiceURI;
        HolidayPlanners = (await http.CreateClient("ClientSettings").GetFromJsonAsync<List<UvwHolidayPlanner>>($"{_URL}/lookup/HolidayPlanner"))
            ?.OrderBy(t => t.Title).ToList() ?? Enumerable.Empty<UvwHolidayPlanner>();
        StateHasChanged();
    }
}

二、解决_Host.cshtml的404错误 #

该错误多与预渲染阶段的组件初始化或API访问失败相关，排查步骤如下：

1. 验证API路径正确性
   确认BaseServiceURI配置的地址无误，拼接后的完整API路径无拼写错误（如多余/缺失斜杠），可通过打印路径验证：

var fullApiUrl = $"{_URL}/lookup/HolidayPlanner";
Console.WriteLine(fullApiUrl); // 查看控制台输出的路径是否符合预期

2. 处理预渲染阶段的API访问限制
   Blazor Server预渲染时，HttpContext与真实请求环境不同，可能导致内部服务访问失败。可通过判断请求路径跳过预渲染时的数据加载：

@inject IHttpContextAccessor HttpContextAccessor

@code {
    protected override async Task OnInitializedAsync()
    {
        // 仅在Blazor SignalR连接阶段加载数据
        if (HttpContextAccessor.HttpContext?.Request.Path.StartsWithSegments("/_blazor") == true)
        {
            _URL = settingsAccessor.AllClientSettings().BaseServiceURI;
            HolidayPlanners = (await http.CreateClient("ClientSettings").GetFromJsonAsync<List<UvwHolidayPlanner>>($"{_URL}/lookup/HolidayPlanner"))
                ?.OrderBy(t => t.Title).ToList() ?? Enumerable.Empty<UvwHolidayPlanner>();
        }
    }
}

3. 检查组件类型与命名空间
   确认typeof(App)的命名空间正确，_Host.cshtml中组件引用无错误（如App组件是否在项目根命名空间下）。

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