Element reference null in Blazor

Question

I have the following html razor code

<StEyth @ref="stEyth"></StEyth>
<Gr1D @ref="gr1D" ></Gr1D>

 

the following code in @code

@code {     
 private Gr1D?  gr1D;
 private StEyth? stEyth;
 protected override async Task OnInitializedAsync()    
 {
   await updateView();
 }
 private async Task updateView()    
 {
   DrpdVal = new IpDrpdValues { ar1 = gr1D.ar1}
   await stEyth.updateView(DrpdVal);
 }
}

But gr1D is null when the code reaches

DrpdVal = new IpDrpdValues { ar1 = gr1D.ar1}

Any idea why? And how could I get the values of the variables in the Gr1D?

Answer 1

The @ref is set during the rendering. OnInitialized executes before the first render.

So the logical place to do this is in OnAfterRender. Use firstRender to do it only once.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
  if (firstRender)
  {
    await updateView();
  }
}

Answer 2

If you add a yield in front of the call to UpdateView then the component runs it's initial render and the child components exist.

    protected override async Task OnInitializedAsync()
    {
        await Task.Yield();
        await UpdateView();
    }

However, if I read your comment above correctly, you're trying to co-ordinate data exchange between components. This is pretty fraught with danger: you aren't in control of the render and update process. You should consider using a service to hold your data, and notification events your components can subscribe to.