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/

#