我有一个Livewire组件，这是一个产品过滤器。这些查询都运行良好，但有时会产生无限的请求循环。

你可以在下面的GIF中看到这种情况，这是Laravel Debugbar的捕获。我单击了一些过滤器，然后突然它进入了这个请求循环。

我特别使用wire：loading.attr=禁用在视图中的过滤器上，所以当请求仍在处理时，某人不能选择过滤器。

我的代码和一些背景：

Livewire组件

use App\Models\Product;
use App\Models\Brand;
use App\Models\Color;

class SearchProducts extends Component
{
    public ?array $brand = [];
    public ?array $color = [];

    protected $queryString = ['brand', 'color'];

    public function render()
    {
        $products = Product::query();

        $products = $products->with('brand');
        $products = $products->with('colors');

        $products = $this->filterBrands($products);
        $products = $this->filterColors($products);

        $products = $products->paginate(24);

        return view('livewire.search-products', [
            'all_brands' => Brand::where('status', 'active')->get(),
            'all_colors' => Color::where('status', 'active')->get(),
        ])->extends('app');
    }

    public function filterBrands($query)
    {
        $queryFilterBrand = array_filter($this->brand);
        
        return empty($queryFilterBrand) ? $query : $query->whereIn('brand_id', $queryFilterBrand);
    }

    public function filterColors($query)
    {
        $queryFilterColor = array_filter($this->color);

        return empty($queryFilterColor) ? $query : $query->whereHas('colors', function ($q) use ($queryFilterColor) {
            $q->whereIn('color_id', $queryFilterColor);
        });
    }

}

我使用array\u filter的原因是，如果我取消选择颜色值并在键中使用字符（wire:model=“brand.b{$brand-

Livewire的观点和问题

这很好：

@foreach($all_brands as $brand)
    <input type="checkbox" value="{{ $brand->id }}" id="brand.{{ $brand->id }}" wire:model="brand.{{ $brand->id }}" wire:loading.attr="disabled">
    <label class="search-label search-wide-label mb-2" for="brand.{{ $brand->id }}">{{ $brand->title }} <i class="fal fa-times float-right selected-icon"></i></label>
@endforeach

但当我选择两种或更多颜色之后，或者选择一种颜色然后取消选择时，这会创建一个无限循环。因此，问题似乎发生在第二次交互之后：

@foreach($all_colors as $color)
    <input type="checkbox" value="{{ $color->id }}" id="color.{{ $color->id }}" wire:model="color.{{ $color->id }}" wire:loading.attr="disabled">
    <label class="search-label search-wide-label mb-2" for="color.{{ $color->id }}">{{ $color->title }} <i class="fal fa-times float-right selected-icon"></i></label>
@endforeach

这很奇怪，因为这个边栏选项卡片段与上面所示的$brand完全相同：

唯一不同的是，颜色关系是与品牌之间的关系。

我现在想这就是问题所在。。。

我尝试过但没有成功的事情

• 删除$all_colors的@foreach循环，只需将过滤器放入纯HTML（以检查问题是否与循环相关）
• 添加wire:key=“brand.{{$brand-

控制台错误

最后一点，只有当无限循环发生时，我才在控制台中得到这个错误，所以它很可能是因果关系。

TypeError:null不是对象（计算'directive.value.split'）

未处理的promise拒绝：TypeError:null不是对象（计算'directive.value.split'）

都在加载状态中。js，我认为这是一个Livewire Javascript文件。

错误似乎发生在这里：

function startLoading(els) {
    els.forEach(({ el, directive }) => {
        if (directive.modifiers.includes('class')) {
            let classes = directive.value.split(' ').filter(Boolean)