Filament 3 资源中的多个 Livewire 组件会出现控制台错误：快照丢失

Question

在我的 Laravel Filament v3 资源中，我有三个 Livewire 自定义组件。编辑页面加载了组件，到目前为止一切顺利。但是当我做一些不相关的事情时，例如打开删除确认模式（也可以单击关系选项卡），其中两个组件会中断并显示错误消息：

livewire.js?id=239a5c52:4437 Uncaught Snapshot missing on Livewire component with id: jMDrgTOxz321azWwuPDI

当我页面上只有一个组件时，完全没有问题。因此，DOM 似乎无法跟踪哪个组件是哪个组件。我该如何解决这个问题？

我尝试向每个组件添加 ->key('component-one') （由 chatgpt4 建议），但没有帮助。

我简化了设置，但问题仍然存在。简化设置：

public static function form(Form $form): Form {
    return $form->schema([
        Livewire::make('component-one'),
        Livewire::make('component-two'),
        Livewire::make('component-three'),
    ])
}

每个组件在 App\Livewire 中都有一个类：

<?php
namespace App\Livewire;
use Livewire\Component;

class ComponentOne extends Component
{
    public function render(){
        return view('livewire.component-one');
    }
}

还有一个刀片文件component-one.blade.php：

<div>Hi i a component 1</div>

Answer 1

在细丝 3 中，形状不是静态的。

public function form(Form $form): Form

阅读文档： https://filamentphp.com/docs/3.x/panels/upgrade-guide