Laravel Livewire渲染后数据转数组 首次正常后续更新报错如何解决

问题根因 #

Livewire 公共属性在组件生命周期里存在 dehydrate（脱水序列化）和hydrate（水合反序列化）的过程：

• 首次渲染时：DB::select()返回的是stdClass对象组成的数组，所以用$state->id的对象语法访问正常
• 触发组件更新后：Livewire 序列化时默认会把stdClass对象转成关联数组，水合后不会自动还原为stdClass，此时再用对象语法访问就会抛出Attempt to read property "id" on array错误。你换数组语法时首次渲染又会因为是stdClass对象报错，就出现了两边不兼容的情况。

解决方法 #

方案1：查询时统一转为二维数组，全程用数组语法访问（推荐，无额外依赖） #

修改mount方法里的查询逻辑，把所有查询结果都转成关联数组，保持首次和后续更新的数据格式一致：

public $states = [];

public function mount()
{
    // 把查询得到的stdClass全部转成关联数组
    $this->states = collect(DB::select("select id,name from hr_states"))
        ->map(fn($state) => (array)$state)
        ->toArray();
}

对应视图层统一用数组语法访问：

<select class="mt-1">
    <option>...select...</option>
    @foreach($states as $state)
        <option value="{{$state['id']}}" wire:key="{{$state['id']}}">{{$state['name']}}</option>
    @endforeach
</select>

方案2：给公共属性添加转型规则，保持对象格式（无需改视图） #

在组件中添加$casts属性，让Livewire水合时自动把states转成集合，保持stdClass对象格式：

// 组件顶部添加转型配置
protected $casts = ['states' => 'collection'];

public $states = [];

public function mount()
{
    $this->states = collect(DB::select("select id,name from hr_states"));
}

视图层可以继续用原来的$state->id对象语法访问，不需要调整视图代码。

方案3：改用Eloquent模型查询（如果有对应模型的话） #

如果存在HrState Eloquent模型，直接用模型查询配合集合转型，语法更简洁：

protected $casts = ['states' => 'collection'];

public $states = [];

public function mount()
{
    $this->states = HrState::select('id','name')->get();
}

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