Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

OnInitializedAsync() in blazor

Tags:

c#

blazor

I have used OnInitializedAsync() in my code. In that hook, I am fetching data. In markup, I have checked whether data is null or not. But I found that data checked is executed before the onInitalizedAsync() triggered. Meanwhile, after getting data too, data checked is executed.

I have checked the blazor documents but struggling to find why it triggered at first.

<Component1>
  @if (Data != null)
      {
        @foreach (var item in Data) {
             <Component2>
        }
       }
</Componet1>

@code{
  protected override async Task OnInitializedAsync() {
       Data = //data from dataBase
  }
}

I need to execute data checked only after data fetch. Can anyone guide me to fix this issue?

like image 580
Kesavan Subramaniam Che Avatar asked Oct 14 '19 06:10

Kesavan Subramaniam Che


3 Answers

The data check has to happen first because something has to be rendered before the OnInitializedAsync method. So in case the OnInitializedAsync takes a long time to load the data, the user already sees something and not just a blank page.

Why do you want the data check only after the data fetch?

As a workaround you can create a local variable bool dataIsLoaded = false; and only after loading data in OnInitializedAsync you can set it to true. Then in the data check do: @if (dataIsLoaded && Data != null)

like image 59
Pascal R. Avatar answered Sep 29 '22 21:09

Pascal R.


I assume that Data is of the list or array type. What I usually do is initialize the list or array in OnInitialized and make the call in OnInitializedAsync. So no checking is necessary.

protected override void OnInitialized()
{
   Data = new List<Type>()
}
like image 32
amustelier Avatar answered Sep 29 '22 21:09

amustelier


I would suggest NOT to check for null Data. Instead just render the Data variable and call StateHasChanged() after Data is loaded inside the OnInitializedAsync(). The key is to let the framework know that variable Data is being used, so when StateHasChanged() is called it will render Data appropriately.

<h3> @Data </h3>

@code {
    private string Data = "";

    protected override async Task OnInitializedAsync()
    {
        Data = await Service.GetDataAsync();
        StateHasChanged();
    }
}
like image 43
Nemo Avatar answered Sep 29 '22 20:09

Nemo