Laravel Inertia 将数据从后端渲染到前端

Question

使用带有 Laravel 惯性的 ReactJS 是全新的。

我正在尝试将数据从数据库渲染到前端。我使用控制器从数据库中获取数据...

// Show all main categories
public static function index() {
    return MainCategory::all(['main_category_id', 'main_category_name']);
}

然后使用 web.php 通过以下代码将其传递到前端。

Route::get('/', function () {
   return Inertia::render('Admin/Categories', [
        'categories' => MainCategoryController::index()
   ]);
})->name('admin.category-setup');

我目前不知道如何使用reactjs在前端调用categories。 我怎样才能做到这一点？

Answer 1

我有时会使用 Inertia 内置的 usePage-Hook for React 来访问传递的 props。当您使用可供所有前端组件访问的共享数据时，这会派上用场（https:// /inertiajs.com/shared-data）。只要您的后端（Laravel）代码正常工作，并且实际的 categories-Property 被移交给类别组件或为所有前端共享，您可以执行以下操作：

import React from 'react';    
import { usePage } from '@inertiajs/inertia-react';
    
    function App() {
        const categories = usePage().props.categories;
    
        return (
            

                {categories.map((category) =>
                    (
{category}
))}
            
        );
    }

然而，对我来说最常见的做法是简单地将在 Laravel 中传递到 Inertia-Component 中的相同变量名称赋予到 React-Component-Props 中，如下所示。在我看来，这应该完全适合您的用例：

import React from 'react';    
    
    function App({categories}) {        
        return (
            

                {categories.map((category) =>
                    (
{category}
))}
            
        );
    }

如果您想了解有关 Inertia 的更多信息，我强烈建议您阅读文档。开发人员在解释一切方面做得非常出色，以便没有经验的 Laravel 和 React Dev 能够理解发生了什么。它实际上没什么可读性，但显示了一些有趣的功能： https://inertiajs.com/