Uncaught (in promise) TypeError: Cannot read properties of null (reading 'fingerprint') Laravel Live

Posted 2023-02-22

【中文标题】Uncaught (in promise) TypeError: Cannot read properties of null (reading \'fingerprint\') Laravel Livewire

【英文标题】：Uncaught (in promise) TypeError: Cannot read properties of null (reading 'fingerprint') Laravel LivewireUncaught (in promise) TypeError: Cannot read properties of null (reading 'fingerprint') Laravel Livewire

【发布时间】：2022-01-11 18:55:57

【问题描述】：

我使用 Laravel Livewire 制作了一个多文件上传组件。上传完成后，我想在不重新加载页面的情况下显示上传的文件，如下所示：

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

一次上传一个或多个文件可以正常工作。但是在循环中已经存在文件时上传时，Livewire 会抛出此错误：Uncaught (in promise) TypeError: Cannot read properties of null (reading 'fingerprint')。

经过一番研究，我得出的结论是，这是因为 Livewire 生成的 id 与第一个文件相同：

<div class="grid grid-flow-col auto-cols-max gap-4 mb-5">               
    <div wire:id="eCHZ9wxyp7nxOC4o5uCC" class="file file-jpeg file-lg">
        <!-- content of existing file component -->
    </div>
                     
    <div wire:id="eCHZ9wxyp7nxOC4o5uCC" class="file file-jpeg file-lg">
        <!-- content of new file component, should have Unique wire:id -->
    </div>        
</div>

如何解决这个问题？

【参考方案1】：

此问题于 2020 年 9 月首次出现并已解决（参考：https://github.com/livewire/livewire/issues/1686）。发生错误是因为新文件对于现有文件不是唯一的。 Github 上提到的解决方案有效但已过时。

如果你使用的是 Laravel 7 或更高版本，你可以在循环内的 livewire 组件中添加:wire:key="$yourUniqueKey"：

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

参考：https://laravel-livewire.com/docs/2.x/nesting-components