如何渲染指定Livewire组件？切换步骤页面崩溃问题求助

错误翻译 #

未捕获错误：无法在DOM树中找到Livewire组件

问题原因 #

你在nextStep方法中先调用了$this->dispatch('$refresh')，此时$step还未更新，父组件会先刷新当前显示的子组件DOM；紧接着更新$step后，Livewire需要重新渲染替换子组件，但两次DOM操作的顺序冲突，导致Livewire的组件追踪机制混乱，找不到原组件实例，触发报错。

解决方案 #

方案1：移除不必要的手动刷新（推荐）

Livewire会自动响应组件属性（如$step）的变化来更新DOM，不需要手动调用$refresh。修改nextStep方法：

#[On('next-step')]
public function nextStep(): void
{
    $this->step = $this->step + 1;
}

方案2：调整刷新顺序（若确实需要手动刷新）

如果业务场景必须手动刷新，需先更新$step再执行刷新操作：

#[On('next-step')]
public function nextStep(): void
{
    $this->step = $this->step + 1;
    $this->dispatch('$refresh');
}

可选优化：统一子组件key规则

可以将子组件的wire:key与$step绑定，确保key的唯一性更直观，避免潜在冲突：

<div class="flex flex-col gap-4 min-h-0" wire:key="questionnaire-step-{{ $step }}">
    @if ($step == 1)
        <livewire:questionnaires.step1 wire:key="q-step-{{ $step }}" />
    @elseif ($step == 2)
        <livewire:questionnaires.step2 wire:key="q-step-{{ $step }}" />
    @elseif ($step == 3)
        <livewire:questionnaires.step3 wire:key="q-step-{{ $step }}" />
    @endif
</div>

内容的提问来源于stack exchange，提问作者Shulz