Laravel Inertia restitue les données du backend au frontend

Question

Utiliser ReactJS avec Laravel Inertia est toute nouvelle.

J'essaie de restituer les données de la base de données vers le frontend. J'utilise le contrôleur pour obtenir les données de la base de données...

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

Ensuite, utilisez web.php pour le transmettre au frontend via le code suivant.

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

Je ne sais actuellement pas comment l'appeler sur le frontend en utilisant Reactjscategories. Comment puis-je faire ceci?

Answer 1

J'utilise parfois les usePage-Hook for React 来访问传递的 props。当您使用可供所有前端组件访问的共享数据时，这会派上用场（https:// /inertiajs.com/shared-data）。只要您的后端（Laravel）代码正常工作，并且实际的 categories-Propriétés intégrées d'Inertia qui sont transmises aux composants de classe ou partagées pour toutes les interfaces, vous pouvez faire ceci :

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

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

); } Cependant, l'approche la plus courante pour moi consiste simplement à donner les mêmes noms de variables qui sont transmis à Inertia-Component dans Laravel dans React-Component-Props, comme indiqué ci-dessous. À mon avis, cela devrait parfaitement correspondre à votre cas d'utilisation :

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

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

); }

Si vous souhaitez en savoir plus sur Inertia, je vous recommande fortement de lire la documentation. Les développeurs font un excellent travail en expliquant tout afin que les développeurs inexpérimentés de Laravel et React puissent comprendre ce qui se passe. Ce n'est vraiment pas très lisible, mais montre quelques fonctionnalités intéressantes : https://inertiajs.com/