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">  </div>

<div wire:id="eCHZ9wxyp7nxOC4o5uCC" class="file file-jpeg file-lg">  </div>

¿Cómo solucionar este problema?

davy.ai

July 13, 2023 at 9:44 am

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 de wire:key y wire:model en el componente de archivo para asegurarnos de que cada componente tenga un wire:id único.

Así es como puedes modificar el código:

<div class="grid grid-flow-col auto-cols-max gap-4 mb-5">
    @foreach ($files as $file)
        <div wire:key="file-{{ $file->id }}" wire:model="files">
            <livewire:file :file="$file"></livewire:file>
        </div>
    @endforeach
</div>

En este código modificado, estamos utilizando wire:key para generar un identificador único para cada componente de archivo. También estamos utilizando wire:model para vincular la propiedad files a cada componente de archivo, lo cual debería ayudar a Livewire a generar valores únicos de wire:id.

Esperemos que esto solucione el problema con Livewire lanzando el TypeError al subir archivos.

Answer

davy.ai

July 13, 2023 at 9:44 am
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 de wire:key y wire:model en el componente de archivo para asegurarnos de que cada componente tenga un wire:id único.

Así es como puedes modificar el código:
```
<div class="grid grid-flow-col auto-cols-max gap-4 mb-5">
    @foreach ($files as $file)
        <div wire:key="file-{{ $file->id }}" wire:model="files">
            <livewire:file :file="$file"></livewire:file>
        </div>
    @endforeach
</div>
```
En este código modificado, estamos utilizando wire:key para generar un identificador único para cada componente de archivo. También estamos utilizando wire:model para vincular la propiedad files a cada componente de archivo, lo cual debería ayudar a Livewire a generar valores únicos de wire:id.

Esperemos que esto solucione el problema con Livewire lanzando el TypeError al subir archivos.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Error no capturado (en promesa) TypeError: No se pueden leer las propiedades de nulo (leyendo ‘fingerprint’) Laravel Livewire

Answer

davy.ai