为什么 2 种插槽组件会出现 Uncaught Snapshot Missing 错误？

Question

在 laravel 11 网站上，我使用定义为 resources/views/livewire/common/controls/input_text.blade.php 的 volt 组件形式：

<?php

use Livewire\Volt\Component;
use Livewire\Attributes\Modelable;

new class extends Component {
    #[Modelable]
    public $form;
    public string $formattedValue = '';
    public string $fieldName = '';
    public string $label = '';
    public ?string $placeholder = '';
    public ?int $maxlength = 0;
    public ?int $tabindex = 0;
};
?>

<div class="editor_field_block_wrapper d2">

    <div class="">
        <div class="w-4/12 pb-0 pl-2 md:pt-3 ">
            <label for="{{ $fieldName }}" class="">
                {{ !empty($label) ? $label: \Str::ucfirst(\Str::replace('_', ' ', $fieldName)) }}:
            </label>
        </div>
        <div class="p-2 w-full">
            <input id="{{ $fieldName }}" name="{{ $fieldName }}" type="text"
                   class="editor_form_input"
                   @if(!empty($maxlength)) maxlength="{{ $maxlength }}" @endif
                   wire:model="form.{{ $fieldName }}"
                   autocomplete="off"
                   @if(!empty($placeholder)) placeholder="{{ $placeholder }}" @endif
                   @if(!empty($tabindex)) tabindex="{{ $tabindex }}" @endif/>
            @error('form.' . $fieldName)
            <span class="error_text">{{$message}}</span>
            @enderror
        </div>
    </div>
</div>

和 resources/views/livewire/common/controls/input_readonly.blade.php （我尝试在任何“div”元素中使用 :key= ，就像我在 https://livewire.laravel.com/docs/troubleshooting# 中读到的那样添加-wirekey）：

<?php

use Livewire\Volt\Component;
use function Livewire\Volt\{mount, state};

state(['fieldName'=> '', 'form'=> '']);
new class extends Component {
    public $form = [];
    public $fieldName = '';

} ?>

<div class="editor_field_block_wrapper d1"  :key="$fieldName . 'RootDivReadonly'">


    <div class=""  :key="$fieldName . 'SplitterDivReadonly'">
        <div class="w-4/12 pb-0 pl-2 md:pt-3">
            <label for="{{ $fieldName }}" class="">
                {{ \Str::ucfirst($fieldName) }}:
            </label>
        </div>
        <div class="p-2 w-full"  :key="$fieldName . 'ParentDivReadonly'">
            <input
                id="{{ $fieldName }}" name="{{ $fieldName }}" type="text"
                value="{{ $form->{$fieldName} }}"
                tabindex="-1"
                :key="$fieldName . 'Readonly'"
                readonly/>
        </div>
    </div>
</div>

在表单上我看到两种类型的控件：

<form class="form-editor" wire:submit="update" enctype="multipart/form-data">


    <livewire:common.controls.input_readonly fieldName="id" :form="$form" :key="'idReadonly'"  />


    <livewire:common.controls.input_text fieldName="phone" wire:model="form" :maxlength="100" tabindex="10" :key="'phoneInputText'" />

    <livewire:common.controls.input_text fieldName="website" wire:model="form" :maxlength="50" tabindex="20" placeholder="Fill your website url" :key="'websiteInputText'" />


</form>

问题是，在我编辑 input_text 元素中的数据并保存表单后，出现错误：

in Uncaught Snapshot missing on Livewire component with id: 2MfhLF0gKp6I1w1LtNDh

我的形式被打破了。

如果我删除线

<livewire:common.controls.input_readonly
    

组件（它是表单上唯一的）-我没有这个错误，并且表单保存正常。

我的代码有什么问题以及如何修复它？

"laravel/framework": "^11.9",
"livewire/livewire": "^3.5",
"livewire/volt": "^1.6",

提前致谢！

Answer 1

我认为问题可能与混合 Volt API 有关。 要声明变量，您应该使用函数式 API：

state(['fieldName'=> '', 'form'=> '']);

或类API：

new class extends Component {
    public $form = [];
    public $fieldName = '';
}

不要混合使用，因为这是完全不同的方法。函数式 API 在底层创建类，而对于传统的基于类的组件，您可以显式地声明它。

此外，您不应该使用 :key，而应使用 html 元素的wire:key。 例如

<livewire:some-component :key="unique-component-key"/>

<div wire:key="unique-key"></div>