Livewire中如何将mount()的状态传递到render()？

组件代码 #

class Form extends Component
{ 
    protected mixed $page;

    public function mount($pageId): void
    {
        // 获取页面类型，用于确定UI字符串
        $this->page = DB::table('pages')->find($pageId);
    }

    public function render(): View
    {
        return view(
            'livewire.titlegen.form',
            [
                'page' => $this->page,
            ]
        );
    }
}

渲染组件的Blade模板 #

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Title') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <livewire:titlegen.form :pageId="$pageId"/>
    </div>
</x-app-layout>

问题现象 #

页面初始渲染正常，组件会先执行mount()再渲染；但调用组件内的Livewire方法后，组件重新渲染时不会再执行mount()，直接报错：

Typed property App\Livewire\Titlegen\Form::$page must not be accessed before initialization

试过把$pageId加到render()方法里，但没解决问题。

解决方法 #

方法1：将$pageId设为公开属性并在渲染时重新获取page #

Livewire在组件更新时只会保留公开属性，mount()仅在初始渲染时执行一次，后续更新不会触发。因此可以：

1. 把$pageId改为公开属性
2. 在mount()里保存传入的pageId
3. 每次render()时重新获取page数据

修改后的组件代码：

class Form extends Component
{ 
    public int $pageId;
    protected mixed $page;

    public function mount(int $pageId): void
    {
        $this->pageId = $pageId;
        $this->page = DB::table('pages')->find($pageId);
    }

    public function render(): View
    {
        // 每次渲染都重新获取page，避免属性未初始化
        $this->page = DB::table('pages')->find($this->pageId);
        return view('livewire.titlegen.form', [
            'page' => $this->page,
        ]);
    }
}

方法2：使用hydrate()钩子初始化属性 #

如果不想公开$pageId，可以用Livewire的hydrate()钩子，它会在每次组件更新后执行，用来重新初始化$page：

class Form extends Component
{ 
    protected mixed $page;
    private int $pageId;

    public function mount(int $pageId): void
    {
        $this->pageId = $pageId;
        $this->page = DB::table('pages')->find($pageId);
    }

    // 每次组件更新后自动执行，重新获取page数据
    public function hydrate(): void
    {
        $this->page = DB::table('pages')->find($this->pageId);
    }

    public function render(): View
    {
        return view('livewire.titlegen.form', [
            'page' => $this->page,
        ]);
    }
}

方法3：使用计算属性（推荐） #

用Livewire的计算属性特性，每次访问$page时自动获取数据，无需手动维护属性状态：

class Form extends Component
{ 
    public int $pageId;

    public function mount(int $pageId): void
    {
        $this->pageId = $pageId;
    }

    // 计算属性，访问$page时自动执行此方法
    public function getPageProperty(): mixed
    {
        return DB::table('pages')->find($this->pageId);
    }

    public function render(): View
    {
        // 模板中直接使用$page即可，无需传递参数
        return view('livewire.titlegen.form');
    }
}

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