Blazor 不会重新渲染以显示我的对象

Question

我刚刚启动了一个新的 Blazor 项目（WASM，而不是服务器）来了解它是如何工作的，如果我做的事情看起来很傻，请原谅我的无知。

使用 .NET 5

该页面应该调用本地托管的 API（我已经检查过它有效），然后在我正在加载的页面上显示它获得的信息。阅读文档和 Blazor 组件生命周期表明使用 OnInitializedAsync() 可能是我最好的选择，因为我想进行调用，但不会阻止网页并看到我在这里使用 ParameterAttribute，我需要等到参数首先绑定（至少我的理解）。

我得到的是调用完成后，它应该会导致页面重新呈现，在页面上显示我的对象信息。

这是我的 GameDetails.razor 文件：

@page "/gamedetails/{gameId:int}"
@inject HttpClient HttpClient
@inject NavigationManager NavManager

<h1>Game Details</h1>

@if (_game != null)
{
    <p>
        Id: @_game.Id<br />
        Title: @_game.Title<br />
        Year: @_game.Year<br />
        Developer: @_game.Developer<br />
        Publisher: @_game.Publisher<br />
        Region: @_game.Region<br />
        Region Code: @_game.ShortRegion <br />
        Keymaps: @_game.KeyMaps
    </p>
}

@code {
    [ParameterAttribute]
    public int gameId { get; set; }

    private GameSearchResult _game;

    protected override async Task OnInitializedAsync()
    {
        string url = $"Mappings?gameId={gameId}";
        _game = await HttpClient.GetFromJsonAsync<GameSearchResult>(url, new JsonSerializerOptions()
        {
            PropertyNamingPolicy = JsonNamingPolicy.CamelCase
        });
    }
}

应该发生的是，您单击不同页面上的卡片，然后将您导航到此页面，然后请求来自 API 的信息显示在页面上。

实际发生的是页面加载，但显示了我的 none 信息。我已经调试并看到信息已成功检索并存储在名为 _game 的 GameSearchResult 对象中，所以我的猜测是页面没有像我认为的那样重新呈现。

我已经尝试调用 StateHasChanged()，正如一些人在其他地方建议的那样，尝试强制重新渲染，但仍然没有。

我应该怎么做才能获得想要的行为？我可以接受整个调用也是同步的，这不会打扰我。

Answer 1

首先，在应用程序生命周期中，OnInitializedAsync 只会运行每个页面组件一次，因此不是响应参数更改的好地方。

参见：https://blazor-university.com/components/component-lifecycles/

其次，尝试将 [ParameterAttribute] 更改为 [Parameter]

[Parameter]
public int gameId { get; set; }

protected override async Task OnParametersSetAsync()
{
    string url = $"Mappings?gameId={gameId}";
    _game = await HttpClient.GetFromJsonAsync<GameSearchResult>(url, new JsonSerializerOptions()
    {
        PropertyNamingPolicy = JsonNamingPolicy.CamelCase
    });
}

Blazor 不会重新渲染以显示我的对象

Blazor doesn't rerender to show my object

c#

blazor

.net-5

blazor-webassembly