Aspnetcore: NullReferenceException when calling StateHasChanged from Javascript

[mrpmorris]

https://github.com/mrpmorris/blazor-fluxor/tree/feature/flight-finder-demo

1. Install Redux Tools extension for Chrome
2. Run the FlightFinder sample
3. Open Dev Tools
4. Click Search
   5: Add a flight to the short list
   6: Flick through the time line in the Dev Tools

This will trigger a callback that will invoke StateHasChanged. At this point a NullReferenceException is encountered...

MonoPlatform.ts:70 Uncaught Error: System.NullReferenceException: Object reference not set to an instance of an object.
  at FlightFinder.Client.Components.Shortlist.BuildRenderTree (:59912/Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder builder) <0x1e07e88 + 0x00058> in <5589bddb96e64f64bb0e27875fbeec39>:0 
  at Microsoft.AspNetCore.Blazor.Rendering.ComponentState.RenderIntoBatch (:59912/Microsoft.AspNetCore.Blazor.Rendering.RenderBatchBuilder batchBuilder, Microsoft.AspNetCore.Blazor.RenderFragment renderFragment) <0x1b91b70 + 0x0006c> in <72270648a3b54698885c6ba1c18107cc>:0 
  at Microsoft.AspNetCore.Blazor.Rendering.Renderer.RenderInExistingBatch (:59912/Microsoft.AspNetCore.Blazor.Rendering.RenderQueueEntry renderQueueEntry) <0x1b91718 + 0x00040> in <72270648a3b54698885c6ba1c18107cc>:0 
  at :59912/Microsoft.AspNetCore.Blazor.Rendering.Renderer.ProcessRenderQueue () <0x1b90e20 + 0x00048> in <72270648a3b54698885c6ba1c18107cc>:0 
  at Microsoft.AspNetCore.Blazor.Rendering.Renderer.AddToRenderQueue (:59912/System.Int32 componentId, Microsoft.AspNetCore.Blazor.RenderFragment renderFragment) <0x1b8dcf8 + 0x00068> in <72270648a3b54698885c6ba1c18107cc>:0 
  at Microsoft.AspNetCore.Blazor.Components.RenderHandle.Render (:59912/Microsoft.AspNetCore.Blazor.RenderFragment renderFragment) <0x1b8d9e0 + 0x00036> in <72270648a3b54698885c6ba1c18107cc>:0 
  at :59912/Microsoft.AspNetCore.Blazor.Components.BlazorComponent.StateHasChanged () <0x1b8d8e8 + 0x00048> in <72270648a3b54698885c6ba1c18107cc>:0 
  at Blazor.Fluxor.Feature`1+<>c[TState].<TriggerStateChangedCallbacks>b__15_0 (:59912/System.Action callback) <0x1fe7048 + 0x00010> in <23c61ea74e5f4ee4afc2e800c444bbfe>:0 
  at System.Collections.Generic.List`1[T].ForEach (:59912/System.Action`1[T] action) <0x1b49f90 + 0x00054> in <a02c7d9644e84620838bef876532992f>:0 
  at :59912/Blazor.Fluxor.Feature`1[TState].TriggerStateChangedCallbacks () <0x1b46970 + 0x0011c> in <23c61ea74e5f4ee4afc2e800c444bbfe>:0 
  at Blazor.Fluxor.Feature`1[TState].set_State (:59912/TState value) <0x1b1c510 + 0x00056> in <23c61ea74e5f4ee4afc2e800c444bbfe>:0 
  at Blazor.Fluxor.Feature`1[TState].RestoreState (:59912/System.Object value) <0x20f5420 + 0x00018> in <23c61ea74e5f4ee4afc2e800c444bbfe>:0 
  at Blazor.Fluxor.ReduxDevTools.ReduxDevToolsMiddleware.OnJumpToState (:59912/System.Object sender, Blazor.Fluxor.ReduxDevTools.CallbackObjects.JumpToStateCallback e) <0x2051f28 + 0x00156> in <23c61ea74e5f4ee4afc2e800c444bbfe>:0 
  at Blazor.Fluxor.ReduxDevTools.ReduxDevToolsInterop.OnJumpToState (:59912/Blazor.Fluxor.ReduxDevTools.CallbackObjects.JumpToStateCallback jumpToStateCallback) <0x2051868 + 0x00020> in <23c61ea74e5f4ee4afc2e800c444bbfe>:0 
  at Blazor.Fluxor.ReduxDevTools.ReduxDevToolsInterop.DevToolsCallback (:59912/System.String messageAsJson) <0x1e09ca8 + 0x000b6> in <23c61ea74e5f4ee4afc2e800c444bbfe>:0 
  at FlightFinder.Client.Components.Shortlist.BuildRenderTree (:59912/Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder builder) <0x1e07e88 + 0x00058> in <5589bddb96e64f64bb0e27875fbeec39>:0 
  at Microsoft.AspNetCore.Blazor.Rendering.ComponentState.RenderIntoBatch (:59912/Microsoft.AspNetCore.Blazor.Rendering.RenderBatchBuilder batchBuilder, Microsoft.AspNetCore.Blazor.RenderFragment renderFragment) <0x1b91b70 + 0x0006c> in <72270648a3b54698885c6ba1c18107cc>:0 
  at Microsoft.AspNetCore.Blazor.Rendering.Renderer.RenderInExistingBatch (:59912/Microsoft.AspNetCore.Blazor.Rendering.RenderQueueEntry renderQueueEntry) <0x1b91718 + 0x00040> in <72270648a3b54698885c6ba1c18107cc>:0 
  at :59912/Microsoft.AspNetCore.Blazor.Rendering.Renderer.ProcessRenderQueue () <0x1b90e20 + 0x00048> in <72270648a3b54698885c6ba1c18107cc>:0 
  at Microsoft.AspNetCore.Blazor.Rendering.Renderer.AddToRenderQueue (:59912/System.Int32 componentId, Microsoft.AspNetCore.Blazor.RenderFragment renderFragment) <0x1b8dcf8 + 0x00068> in <72270648a3b54698885c6ba1c18107cc>:0 
  at Microsoft.AspNetCore.Blazor.Components.RenderHandle.Render (:59912/Microsoft.AspNetCore.Blazor.RenderFragment renderFragment) <0x1b8d9e0 + 0x00036> in <72270648a3b54698885c6ba1c18107cc>:0 
  at :59912/Microsoft.AspNetCore.Blazor.Components.BlazorComponent.StateHasChanged () <0x1b8d8e8 + 0x00048> in <72270648a3b54698885c6ba1c18107cc>:0 
  at Blazor.Fluxor.Feature`1+<>c[TState].<TriggerStateChangedCallbacks>b__15_0 (:59912/System.Action callback) <0x1fe7048 + 0x00010> in <23c61ea74e5f4ee4afc2e800c444bbfe>:0 
  at System.Collections.Generic.List`1[T].ForEach (:59912/System.Action`1[T] action) <0x1b49f90 + 0x00054> in <a02c7d9644e84620838bef876532992f>:0 
  at :59912/Blazor.Fluxor.Feature`1[TState].TriggerStateChangedCallbacks () <0x1b46970 + 0x0011c> in <23c61ea74e5f4ee4afc2e800c444bbfe>:0 
  at Blazor.Fluxor.Feature`1[TState].set_State (:59912/TState value) <0x1b1c510 + 0x00056> in <23c61ea74e5f4ee4afc2e800c444bbfe>:0 
  at Blazor.Fluxor.Feature`1[TState].RestoreState (:59912/System.Object value) <0x20f5420 + 0x00018> in <23c61ea74e5f4ee4afc2e800c444bbfe>:0 
  at Blazor.Fluxor.ReduxDevTools.ReduxDevToolsMiddleware.OnJumpToState (:59912/System.Object sender, Blazor.Fluxor.ReduxDevTools.CallbackObjects.JumpToStateCallback e) <0x2051f28 + 0x00156> in <23c61ea74e5f4ee4afc2e800c444bbfe>:0 
  at Blazor.Fluxor.ReduxDevTools.ReduxDevToolsInterop.OnJumpToState (:59912/Blazor.Fluxor.ReduxDevTools.CallbackObjects.JumpToStateCallback jumpToStateCallback) <0x2051868 + 0x00020> in <23c61ea74e5f4ee4afc2e800c444bbfe>:0 
  at Blazor.Fluxor.ReduxDevTools.ReduxDevToolsInterop.DevToolsCallback (:59912/System.String messageAsJson) <0x1e09ca8 + 0x000b6> in <23c61ea74e5f4ee4afc2e800c444bbfe>:0 
    at Object.callMethod (MonoPlatform.ts:70)
    at fluxorDevTools.subscribe (<anonymous>:18:21)
    at <anonymous>:1:74328
    at <anonymous>:1:70919
    at Array.forEach (<anonymous>)
    at <anonymous>:1:70899
    at Array.forEach (<anonymous>)
    at handleMessages (<anonymous>:1:70825)

[Suchiman]

That's a little bit low on instructions, when exactly am i supposed to encounter that?

[Suchiman]

Ok i see, there were more instructions added 😉
The error is reported in BuildRenderTree which is the method that runs the razor code.
In particular, you're getting a NullReferenceException on https://github.com/mrpmorris/blazor-fluxor/blob/0231549b3eddd7c27e2c9f3330c46d2d61c8c1eb/samples/05-FlightFinder/FlightFinder/FlightFinder.Client/Components/Shortlist.cshtml#L4 because AppState.Value.Shortlist is null.

[mrpmorris]

@Suchiman I accidentally clicked the submit button before I had finished typing, so I had to edit in the instructions :)

Thanks so much for looking at it. It seems JsonUtil will not deserialize IReadOnlyList, so I was ending up with nulls.

How did you work out it was Shortlist.cshtml#L4 from that stack trace?

[Suchiman]

I knew that it was the Razor code inside Shortlist.cshtml from the Stacktrace because Shortlist.BuildRenderTree.
I then guessed what could possibly the cause of the NRE and then added:

@inject IState<Client.Store.AppState> AppState
@inject IDispatcher Dispatcher

@{
    Console.WriteLine("AppState is " + (AppState == null ? "null" : "not null"));
    Console.WriteLine("AppState.Value is " + (AppState.Value == null ? "null" : "not null"));
    Console.WriteLine("AppState.Value.Shortlist is " + (AppState.Value.Shortlist == null ? "null" : "not null"));
}
<h2>Shortlist (@AppState.Value.Shortlist.Count)</h2>

The @{ } places the code essentially into the BuildRenderTree method so it runs on rendering and that showed that AppState.Value.Shortlist is null

[mrpmorris]

@Suchiman Are you on Twitter? If so, what is your ID?