Implementé una biblioteca de javascript llamada Flickity y funciona bien. Pero cuando recorro una lista de objetos llamados desde un punto final de API, recibo algunos errores.

El código que estoy usando es este:

 <div class="main-carousel"> @foreach (var item in campaigns) { <div class="carousel-cell"></div> }

 @code { protected async override Task OnAfterRenderAsync(bool firstrender) { if (firstrender) { await js.InvokeAsync<object>("initF"); } } public List<StoreCampaignModel> campaigns { get; set; } protected async override Task OnInitializedAsync() { campaigns = await _repoCampaign.Get(EndPoints.StoreCampaignEndPoint + $"Get?orgId=11", Config.WebboxToken); }

}

Eso representa el objeto flickity correctamente pero da este mensaje de error en la consola:

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Componente de representación de excepción no controlada: referencia de objeto no establecida en una instancia de un objeto. System.NullReferenceException: la referencia de objeto no se establece en una instancia de un objeto. en K10Forlag.UI.Shared.Flickity.BuildRenderTree(RenderTreeBuilder __builder) en C:\Users\peter\OneDrive\Websiter\Kanal10Media.UI\K10Forlag.UI\Shared\Flickity.razor:line 11 en Microsoft.AspNetCore.Components.ComponentBase .<.ctor>b__6_0(constructor RenderTreeBuilder) en Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)

Eso significa que las campañas no se iniciaron, así que estoy pensando que puedo verificar si es nulo o simplemente iniciarlo como una lista vacía. Pero cuando intento que el javascript no se cargue correctamente y el objeto flickity no se muestra correctamente.

He incluido un pequeño video para mostrar el escenario. https://www.screencast.com/t/eksMC09oipJL

No estoy seguro de cómo solucionar esto, pero espero que me ayuden a encontrar una solución.