Livewire Livewire > 在尝试混合 > [filter-simulators] 组件时遇到损坏的数据

Question

我为过滤器产品制作了火线组件，但在 Livewire 上出现错误

<?php

namespace App\Http\Livewire;

use App\Models\Area;
use Livewire\Component;
use App\Models\Simulator;

class FilterSimulators extends Component
{

    public $areas;
    public $simulators;

    public function mount(){
        $this->areas = Area::get();
        $this->simulators = Simulator::orderBy('name', 'desc')->get();
    }

    public function filterByArea($type)
    {
        $this->simulators = Simulator::orderBy('name', 'desc')->get();
    }
    
    public function render()
    {
        return view('livewire.filter-simulators');
    }
}

和 Livewire 组件

<div>
    <div class="has-text-centered">
        <ul class="list-filter-simulators">
            @foreach ($areas as $area)
                <li class="mx-15">
                    <a href="#" wire:click.prevent="filterByArea('{{ $area->slug }}')" class="text-sm">{{ $area->name }}</a>
                </li>    
            @endforeach
            
        </ul>
    </div>
    <div class="columns is-multiline mt-45">
        @foreach ($simulators as $simulator)
        <div class="column m-15 widget-simulator" style="background-image: url('/img/simulator01.webp')">
            <h4 class="text-white is-size-5 text-bold">{{ $simulator->name }}</h4>
        </div>
        @endforeach
    </div>
</div>

当我按下锚 filterByArea 时显示一个弹出窗口（为了简化示例，我删除了过滤器 Eloquent 的逻辑）

Livewire\Exceptions\CorruptComponentPayloadException Livewire encountered corrupt data when trying to hydrate the [filter-simulators] component. Ensure that the [name, id, data] of the Livewire component wasn't tampered with between requests.

我搜索并尝试将 $simulators 转换为 protecto 并手动添加到 return 视图，但我得到了同样的错误，可能是因为这是我第一天使用 Live Wire 哈哈哈，组件显示开始只有当我按下按钮启动错误时，我的所有数据才正确，我希望有人能帮助我:)

谢谢！问候！

Answer 1

我之前也遇到过同样的问题。我们可以通过在渲染组件时手动传递集合来解决这个问题。要有过滤选项，我们可以引入一个新的变量来启用过滤。

假设我们引入一个变量来存储过滤值$filter_area_type

class FilterSimulators extends Component
{

    public $areas;
    public $filter_area_type; 

    public function mount(){
        $this->areas = Area::get();
    }

    public function filterByArea($type)
    {
      $this->filter_by_area = $type;

    }
    
    public function render()
    {
        $simulators = Simulator::query()
                      ->when($this->filter_area_type, fn($q, $type) => $q->where('area',$type))
                      ->orderBy('name', 'desc')->get();

        return view('livewire.filter-simulators',[
           'simulators' => $simulators     
          ]);
    }
}

请注意，我使用了 when，它可以让我们有条件地将 where 子句附加到查询中。

如果我们想重置过滤器，我们可以引入另一个函数并仅重置 $filter_area_type 变量，如下所示，

    public function resetFilterArea(){
        $this->reset('filter_area_type');
    }

Livewire Livewire > 在尝试混合 > [filter-simulators] 组件时遇到损坏的数据

Livewire Livewire > encountered corrupt data when trying to hydrate the > [filter-simulators] component

laravel

laravel-livewire