Laravel Inertia rendert Daten vom Backend zum Frontend

Question

Die Verwendung von ReactJS mit Laravel Inertia ist brandneu.

Ich versuche, Daten von der Datenbank zum Frontend zu rendern. Ich verwende einen Controller, um Daten aus der Datenbank abzurufen...

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

Dann verwenden Sie web.php, um es über den folgenden Code an das Frontend zu übergeben.

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

Ich weiß derzeit nicht, wie ich es im Frontend mit ReactJS aufrufen sollcategories. Wie kann ich das machen?

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/