Livewire搜索异常：Snapshot missing报错排查与修复咨询

代码片段 #

<div class="right-board">
    <div class="caption-h-btn mobile-wrap">
        <h1>@lang('app.My ad')</h1>
        <div class="small-search-field">
            <i class="ico-search"></i>
            <input type="text" wire:model="search" wire:keydown.enter="searchAd()"
                   placeholder="@lang('app.Search')">
        </div>
    </div>
    <div class="tab-wrapper">
        <div class="overflow-scroll-box">
            <ul class="head-tab like-button2 white-space-nowrap">
                <li><a href="#adv1"
                       @if ($activeTab == '#adv1') class="active" @endif>@lang('app.Active') {{count($active)}}</a>
                </li>
                <li><a href="#adv2"
                       @if ($activeTab == '#adv2') class="active" @endif>@lang('app.Fail') {{count($fail)}}</a>
                </li>
                <li><a href="#adv6"
                       @if ($activeTab == '#adv6') class="active" @endif>@lang('app.Lock') {{count($locked)}}</a>
                </li>
                <li><a href="#adv3"
                       @if ($activeTab == '#adv3') class="active" @endif>@lang('app.Archive') {{count($archive)}}</a></li>
                <li><a href="#adv4"
                       @if ($activeTab == '#adv4') class="active" @endif>@lang('app.Notes') {{count($note)}}</a>
                </li>
                <li><a href="#adv5"
                       @if ($activeTab == '#adv5') class="active" @endif>@lang('app.Moderation') {{count($moderation)}}</a>
                </li>
            </ul>
        </div>
        <div class="body-tab {{$activeTab == '#adv1' ? 'active' : ''}}" id="adv1">
            @foreach($active as $item)
                <div class="box-board-border">
                    <livewire:ad-profile :key="'ad-profile-'.$item->id.'-tab1'" :item="$item"/>
                </div>
            @endforeach
            @if (count($active) == 0)
                <p class="clean-tab-text">@lang('app.Not found')</p>
            @endif
        </div>
        <div class="body-tab {{$activeTab == '#adv2' ? 'active' : ''}}" id="adv2">
            @foreach ($fail as $item)
                <div class="box-board-border">
                    <livewire:ad-profile :key="'ad-profile-'.$item->id.'-tab2'" :item="$item"/>
                </div>
            @endforeach
        </div>
        <div class="body-tab {{$activeTab == '#adv6' ? 'active' : ''}}" id="adv6">
            @foreach ($locked as $item)
                <div class="box-board-border">
                    <livewire:ad-profile :key="'ad-profile-'.$item->id.'-tab6'" :item="$item"/>
                </div>
            @endforeach
        </div>
        <div class="body-tab {{$activeTab == '#adv3' ? 'active' : ''}}" id="adv3">
            @foreach ($archive as $item)
                <div class="box-board-border">
                    <livewire:ad-profile :key="'ad-profile-'.$item->id.'-tab3'" :item="$item"/>
                </div>
            @endforeach
        </div>
        <div class="body-tab {{$activeTab == '#adv4' ? 'active' : ''}}" id="adv4">
            @foreach ($note as $item)
                <div class="box-board-border">
                    <livewire:ad-profile :key="'ad-profile-'.$item->id.'-tab4'" :item="$item"/>
                </div>
            @endforeach
        </div>
        <div class="body-tab {{$activeTab == '#adv5' ? 'active' : ''}}" id="adv5">
            @foreach ($moderation as $item)
                <div class="box-board-border">
                    <livewire:ad-profile :key="'ad-profile-'.$item->id.'-tab5'" :item="$item"/>
                </div>
            @endforeach
        </div>
    </div>
    @push('scripts')
        <script>
            $(function () {
                const el = $('.overflow-scroll-box')
                const leftOffset = el.find('a.active').position().left;
                el.scrollLeft(leftOffset);
            })
        </script>
    @endpush
</div>

异常现象 #

通过广告编号搜索时，若目标广告是列表首位则功能正常；若为第二位及以后，会抛出错误：Uncaught Snapshot missing on Livewire component with id: GNJ2OeHRPh4jt67U30uG

原因分析 #

• 子组件ad-profile的key包含了标签页后缀（如-tab1），搜索过滤后目标广告从原标签页的非首位变为搜索结果的首位，但key仍保留原标签页标识，导致Livewire无法匹配到对应组件的快照。
• 搜索操作触发父组件重渲染时，原有标签页的子组件实例被销毁，而搜索结果渲染的子组件key与原实例不匹配，引发快照丢失。

修复方案 #

1. 统一子组件key规则 #

去掉key中的标签页后缀，直接用广告ID作为唯一标识（广告ID本身具备唯一性），确保组件实例的稳定性：

<!-- 替换所有子组件调用的key -->
<livewire:ad-profile :key="'ad-profile-'.$item->id" :item="$item"/>

2. 同步搜索后的标签页状态 #

在searchAd()方法中，定位目标广告所在的标签页并切换$activeTab，避免渲染非目标标签的内容：

public function searchAd()
{
    // 执行搜索逻辑，获取目标广告$targetAd
    if ($targetAd) {
        // 根据广告状态切换对应标签页
        match($targetAd->status) {
            'active' => $this->activeTab = '#adv1',
            'fail' => $this->activeTab = '#adv2',
            'locked' => $this->activeTab = '#adv6',
            'archive' => $this->activeTab = '#adv3',
            'note' => $this->activeTab = '#adv4',
            'moderation' => $this->activeTab = '#adv5',
        };
    }
}

3. 隔离搜索结果与原标签数据 #

新增$searchResults变量存储搜索结果，优先渲染搜索内容，避免干扰原标签页的子组件实例：

<!-- 视图中新增搜索结果渲染逻辑 -->
@if(!empty($searchResults))
    <div class="body-tab active">
        @foreach($searchResults as $item)
            <div class="box-board-border">
                <livewire:ad-profile :key="'ad-profile-'.$item->id" :item="$item"/>
            </div>
        @endforeach
        @if(count($searchResults) == 0)
            <p class="clean-tab-text">@lang('app.Not found')</p>
        @endif
    </div>
@else
    <!-- 原有标签页内容 -->
    <div class="tab-wrapper">
        <!-- ... 保留原标签页代码 ... -->
    </div>
@endif

内容的提问来源于stack exchange，提问作者Тарас Гаврилюк