当我 运行 一个 Blazor 应用程序时收到一个模糊的错误

Question

我正在尝试在 Blazor 中创建一个简单的 Web 应用程序，它使用 HTML table.

显示游戏列表

我写了一些代码，但是当我尝试 运行 它时，我得到了这个错误：

An unhandled error has occurred

我正在使用 API returns JSON 格式的游戏列表。我知道 API 没问题，因为当我使用 Postman 测试它时它工作正常。

这是我的代码：

var gamesList= await Http.GetFromJsonAsync<GameData[]>("http://1.1.1.1/api/gamedata");


<table>
    <th>Games</th>
            @foreach (var game in gamesList)
            {
                <tr>
                    <td>@game.Title</td>
                    <td>@game.Genre</td>
                    <td>@game.Price</td>
                </tr>
            }
</table>

我有什么地方做错了吗？

谢谢！

Answer 1

您的代码应如下所示：

@inject HttpClient Http


@if (gamesList == null)
{
   <p><em>Loading...</em></p>
}
else
{
    <table class="table">
       <thead>
         <tr>
            <th>Title</th>
            <th>Genre</th>
            <th>Price</th>
        </tr>
       </thead>
       <tbody>
        @foreach (var game in gamesList)
        {
            <tr>
                <td>@game.Title</td>
                <td>@game.Genre</td>
                <td>@game.Price</td>
            </tr>
        }
      </tbody>
   </table>
 }

 @code {
    private GameData[] gamesList;

    protected override async Task OnInitializedAsync()
   {

      gamesList = await Http.GetFromJsonAsync<GameData[]> 
          ("gamedata");

    }

}

还要确保您的 Program.Main 方法中包含此代码：

  var builder = WebAssemblyHostBuilder.CreateDefault(args);
  builder.RootComponents.Add<App>("app");

  builder.Services.AddTransient(sp => new HttpClient { BaseAddress = 
               new Uri(builder.HostEnvironment.BaseAddress) });

  await builder.Build().RunAsync();

注意：此错误可能有多种原因。我倾向于认为这是由于没有检查 gamesList 是否为 null，这是在呈现 table 时。重要的是要了解，当您调用 OnInitialisedAsync 方法时，控制权将交给调用代码（框架），该调用代码在您的异步方法 returns 之前开始呈现 table，这意味着 gamesList 仍然为 null , 引发异常。

希望这能奏效...