Blazor页面加载时API获取随机名言失效，仅按钮触发有效

核心问题原因 #

1. 直接在Razor模板中调用异步方法：你在@if(aratzfag == false)块里直接写@GetRandomQuote()，这种方式会同步执行异步方法的返回值（Task对象），但异步操作还未完成页面就已渲染，且操作完成后不会通知Blazor重新渲染组件——只有点击按钮触发GetCharacter时，因修改了display和character变量，Blazor自动触发渲染，才会显示已加载好的quote。
2. 生命周期方法使用不当：之前的OnAfterRenderAsync没有加firstRender判断（会导致每次组件渲染都重复调用API），也未手动调用StateHasChanged()通知组件状态更新，所以quote加载完成后页面不会刷新。

修复方案 #

方案1：使用OnInitializedAsync初始化数据（推荐）

这是Blazor中加载初始化数据的标准方式，异步操作完成后会自动触发组件渲染。

修改@code部分，添加生命周期方法，同时移除Razor模板中直接调用GetRandomQuote()的代码：

@code {
    string nombre = "";
    Class1[] character;
    Class2[] quote;
    string display = "none";

    // 页面初始化时加载随机名言
    protected override async Task OnInitializedAsync()
    {
        quote = await Client.GetFromJsonAsync<Class2[]>(Endpoints.GetRandomQuote());
    }

    async Task GetCharacter(){
        character = await Client.GetFromJsonAsync<Class1[]>(Endpoints.GetCharacter(nombre));
        if (character.Length == 0){
            character =  null;
        }
        display = "flex";
    }
}

修改Razor模板，移除原有的@if(aratzfag == false)块，直接判断quote：

<!-- 替换原有的名言展示代码 -->
@if (quote != null){
    <p>@quote[0].quote</p>
}

方案2：正确使用OnAfterRenderAsync

如果必须在OnAfterRenderAsync中加载数据，需要添加firstRender判断避免重复调用，并手动触发状态更新：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender) // 仅在首次渲染时执行
    {
        quote = await Client.GetFromJsonAsync<Class2[]>(Endpoints.GetRandomQuote());
        StateHasChanged(); // 通知组件状态已变更，触发重新渲染
    }
}

关键注意事项 #

• 永远不要在Razor模板中直接调用异步方法（如@GetRandomQuote()），这种写法无法正确处理异步操作的状态更新。
• 当在OnAfterRenderAsync中修改组件状态时，必须调用StateHasChanged()，因为此时Blazor不会自动检测状态变化。
• 移除不必要的aratzfag变量，逻辑可直接通过quote != null实现，减少冗余代码。

内容的提问来源于stack exchange，提问作者Marko Gros Shurima TM