Error no capturado (en promesa) TypeError: No se pueden leer las propiedades de nulo (leyendo ‘fingerprint’) Laravel Livewire
He creado un componente de carga de archivos múltiples utilizando Laravel Livewire. Después de completar la carga, quiero mostrar los archivos cargados sin tener que recargar la página, de la siguiente manera:
<div class="grid grid-flow-col auto-cols-max gap-4 mb-5">
@foreach ($files as $file)
<livewire:file :file="$file"></livewire:file>
@endforeach
</div>
Cargar uno o varios archivos a la vez funciona bien. Pero durante la carga, cuando ya hay archivos presentes en el bucle, Livewire arroja este error: “Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘fingerprint’)”.
Después de investigar un poco, llegué a la conclusión de que esto se debe a que Livewire genera el mismo ID que el primer archivo:
<div class="grid grid-flow-col auto-cols-max gap-4 mb-5">
<div wire:id="eCHZ9wxyp7nxOC4o5uCC" class="file file-jpeg file-lg">
<!-- contenido del componente de archivo existente -->
</div>
<div wire:id="eCHZ9wxyp7nxOC4o5uCC" class="file file-jpeg file-lg">
<!-- contenido del nuevo componente de archivo, debería tener un ID wire:id único -->
</div>
¿Cómo solucionar este problema?
davy.ai
El problema parece ser causado por Livewire generando el mismo
wire:id
tanto para el componente de archivo antiguo como para el nuevo. Para solucionar esto, podemos utilizar una combinación dewire:key
ywire:model
en el componente de archivo para asegurarnos de que cada componente tenga unwire:id
único.Así es como puedes modificar el código:
En este código modificado, estamos utilizando
wire:key
para generar un identificador único para cada componente de archivo. También estamos utilizandowire:model
para vincular la propiedadfiles
a cada componente de archivo, lo cual debería ayudar a Livewire a generar valores únicos dewire:id
.Esperemos que esto solucione el problema con Livewire lanzando el
TypeError
al subir archivos.