Laravel Livewire：除非使用 uniqid()，否则组件键不起作用？答案

【问题标题】：Laravel Livewire : Component keys not working unless uniqid() is used?Laravel Livewire：除非使用 uniqid()，否则组件键不起作用？
【发布时间】：2021-03-16 11:14:17
【问题描述】：

我有一个livewire 组件，例如：

组件类：

class TestComponent extends Component
{
    public $showFilter = true;
    
    /*
    |--------------------------------------------------------------------------
    | Handle : Filter Button Click
    |--------------------------------------------------------------------------
    */
    public function handleFilterButtonClick() {

        $this->showFilter = !$this->showFilter;
    }
    
    /*
    |--------------------------------------------------------------------------
    | Render
    |--------------------------------------------------------------------------
    */

    public function render()
    {
        return view('livewire.something');
    }
    
}

刀片文件：


<div class="show-filter-btn" wire:click="handleFilterButtonClick">
    hide / show filters
</div>

<div class="some-div">

    @if($showFilter)
    
        @livewire('search.side-bar', key(uniqid()));
    
    @endif
    
</div>

<div style="flex-grow: 1"> {{-- ref={ function(element) { self._input = element; } } --}}

    <div>

        @livewire('search.pagination', [], key(uniqid()));
        
    </div>
        
</div>

当我单击show-filter-btn 时，它将show/hide sidebar 组件，我使用uniqid() 为components 生成key()，因为如果我使用除此之外的任何东西（例如：@ 987654330@, sidebar-1234 等）它会抛出index.js:32 Uncaught (in promise) TypeError: Cannot read property 'fingerprint' of null 错误，我是livewire 的新手，所以我不太明白它是如何工作的，组件不是彼此相邻的，所以他们为什么还需要unique 键来识别对方？仅当有 loop 和 list 时才需要键

【问题讨论】：

标签： php laravel laravel-livewire

【解决方案1】：

我不确定这是否是同一个错误，但我今天遇到了类似的情况，即我在同一个刀片文件中有多个组件。我学到的是，如果我将model->id 用作超过 1 个组件的 livewire $key，livewire 就会被迷惑，无法区分组件 A 的索引 #1 和组件 B 的索引 #1 之间的区别。似乎忘记了适用哪个循环。

我最终通过连接一个字符串标识符来更改我的代码，问题得到了解决。

key($account->id) 变成了key('account-'.$account->id)

和

key($role->id) 变成了key('role-'.$role->id)

关键值不再发生冲突，从而解决了挑战。

再次，不确定这是否与您遇到的相同挑战，但足够接近让我投入 2 美分。

【讨论】：