未捕获（承诺中）类型错误：无法读取 null 的属性（读取“指纹”）Laravel Livewire

Question

我使用 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>

如何解决这个问题？

Answer 1

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

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

<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

另请检查https://laravel-livewire.com/docs/2.x/troubleshooting#dom-diffing-issues，特别是这部分：

您传递给该页面的值wire:key必须是完全唯一的。这意味着您应该为其添加前缀，例如wire:key="item-{{ $item->id }}"，并$loop->index尽可能避免使用它来跟踪各个元素。