Laravel Livewire无限滚动：集合追加数据时模型转数组异常

问题概述 #

使用Livewire实现无限滚动，采用cursorPaginate分页并将数据追加到Collection中（而非每次查询全部数据）。首次调用loadPosts方法时，$posts集合中的元素均为App\Models\Post模型实例，符合预期；但第二次触发加载时，原有集合中的模型实例被转为数组，新追加的元素仍为模型实例。尝试过遍历$posts->items()逐个push、将$posts改为数组类型用array_push追加，均未解决问题。调试确认每次查询得到的$posts都是正常的模型集合，仅在第二次追加操作后旧数据发生类型转换。

原因分析 #

Livewire会对组件的公共属性进行序列化与反序列化处理：

1. 首次请求后，公共属性$posts中的模型实例会被序列化为数组并存储；
2. 第二次触发loadPosts时，Livewire会将存储的数组反序列化回组件，此时原有元素已是数组；
3. 新查询的$posts是当前请求中生成的模型实例，未经过序列化步骤，因此保留模型类型，最终出现数组与模型实例混合的情况。

解决方案 #

方案1：使用私有属性+计算属性（推荐） #

将存储数据的集合改为私有属性，避免被Livewire序列化，同时通过计算属性供视图调用：

class HomePage extends Component
{
    private $_posts; // 私有属性，不参与Livewire序列化
    public $nextCursor;
    public $hasMorePages;

    public function mount()
    {
        $this->_posts = collect();
        $this->loadPosts();
    }

    // 计算属性，供视图访问$posts
    public function getPostsProperty()
    {
        return $this->_posts;
    }

    public function loadPosts()
    {
        if ($this->hasMorePages !== null && !$this->hasMorePages) {
            return;
        }

        $posts = Post::cursorPaginate(
            5,
            ['*'],
            'cursor',
            Cursor::fromEncoded($this->nextCursor)
        );
        $this->_posts->push(...$posts->items());
        $this->hasMorePages = $posts->hasMorePages();
        if ($this->hasMorePages) {
            $this->nextCursor = $posts->nextCursor()->encode();
        }
    }
}

视图中依然使用$posts变量，无需修改：

@foreach($posts as $post)
    <livewire:post-card :post="$post" :loop_index="$loop->index" wire:key="{{$loop->index}}"/>
@endforeach

方案2：手动将数组转回模型实例 #

如果必须使用公共属性，在每次追加新数据前，将现有集合中的数组元素重新转为模型实例：

public function loadPosts()
{
    if ($this->hasMorePages !== null && !$this->hasMorePages) {
        return;
    }

    // 将现有集合中的数组转回Post模型实例
    $this->posts = $this->posts->map(function ($item) {
        return is_array($item) ? new \App\Models\Post($item) : $item;
    });

    $posts = Post::cursorPaginate(
        5,
        ['*'],
        'cursor',
        Cursor::fromEncoded($this->nextCursor)
    );
    $this->posts->push(...$posts->items());
    $this->hasMorePages = $posts->hasMorePages();
    if ($this->hasMorePages) {
        $this->nextCursor = $posts->nextCursor()->encode();
    }
}

说明 #

方案1从根源避免了序列化问题，性能更优；方案2适合无法修改属性访问权限的场景，但需要额外的类型转换操作。

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