Blazor Webassembly 配置 (appsettings.json) 最初在组件中加载 null 值

Question

Blazor WebAssembly App Loads Configuration Values After Executing Methods Resulting in Null's Initialy then it will return with correct values.

I followed Microsoft documentation .

Appseting File:

wwwroot/appsettings.json

My Component.razor:

@page "/"

<h1>Configuration example</h1>

<p>Message: @Configuration["message"]</p>
@code {
   protected override async Task OnParametersSetAsync()
   {
      await trying to read Configuration["Message"];
    }
}

My Program.cs File:

 public class Program
        {
        public static async Task Main(string[] args)
        {
        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();
    }
}

My _Imports.razor

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.Extensions.Configuration
@using Microsoft.JSInterop
@inject IConfiguration Configuration;

Note: Understand that I am getting the value's correctly but always null first then re-renders with correct values, i am using OnParametersSetAsync() as entry point, i understand OnParametersSetAsync() changes on every Parameter Change. but the Configuration Values should be constant not null first right?

Answer 1

I had the same problem today when I tried to fetch connection string value from appsettings.json. Try to Restart Visual Studio and it will work properly.

Answer 2

The component is instantiated twice, before and after loading data. This is per design to show the page faster and then load the data after.

Why does Blazor renders component twice

Why are Blazor lifecycle methods getting executed twice?

Loading data on component load

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-3.1#stateful-reconnection-after-prerendering

Answer 3

it worked after updating to blazor nuget packages from 3.2.0 to 3.2.1