Laravel Inertia.js中如何通过usePage从子组件向父组件传值

核心原因 #

直接访问子组件路由时数据正常，说明后端在子组件对应的路由控制器里返回了posts数据，但父组件对应的路由控制器没有返回posts。Inertia.js中每个页面组件的数据由对应路由的后端控制器提供，父组件通过usePage().props获取的是当前路由控制器传递的数据，所以如果父组件路由没传posts，自然无法传递给子组件。

解决步骤 #

1. 检查并修改父组件对应路由的Laravel控制器
   找到父组件Parent对应的后端路由控制器，在返回Inertia响应时添加posts数据：

   use App\Models\Post;
   use Inertia\Inertia;
   
   public function index()
   {
       return Inertia::render('Parent', [
           'auth' => auth()->user(),
           'laravelVersion' => app()->version(),
           'phpVersion' => PHP_VERSION,
           'posts' => Post::all(), // 新增这行，传递posts数据
       ]);
   }
   

2. 验证父组件中posts是否存在
   在父组件里添加日志输出，确认数据是否正确获取：

   export default function Parent({ auth, laravelVersion, phpVersion }) {
       const { posts } = usePage().props;
       console.log('Parent组件的posts:', posts); // 控制台查看数据
   
       return (
           <>
               <Head title="Welcome" />
               <div>
                   <div>
                       {posts ? <Children posts={posts} /> : <p>加载中...</p>}
                   </div>
               </div>
           </>
       );
   }
   

3. 子组件兜底优化（可选）
   为了避免数据未加载时的空白，子组件可以进一步优化：

   export default function Children({ posts }) {
       return (
           <>
               <h1>My Super Blog</h1>
               <hr/>
               {posts ? (
                   posts.map(item => (
                       <div key={item.id}>
                           <h2>{item.title}</h2>
                           <p>{item.body}</p>
                       </div>
                   ))
               ) : (
                   <p>暂无文章数据</p>
               )}
           </>
       );
   }
   

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