Laravel Inertia menjadikan data dari hujung belakang ke hujung hadapan

Question

Menggunakan ReactJS dengan Laravel Inertia adalah serba baharu.

Saya cuba memberikan data daripada pangkalan data ke bahagian hadapan. Saya menggunakan pengawal untuk mendapatkan data daripada pangkalan data...

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

Kemudian gunakan web.php untuk menghantarnya ke bahagian hadapan melalui kod berikut.

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

Saya pada masa ini tidak tahu cara memanggilnya di bahagian hadapan menggunakan reactjscategories. Bagaimana saya boleh melakukan ini?

Answer 1

Saya kadangkala menggunakan terbina dalam usePage-Hook for React 来访问传递的 props。当您使用可供所有前端组件访问的共享数据时，这会派上用场（https:// /inertiajs.com/shared-data）。只要您的后端（Laravel）代码正常工作，并且实际的 categories-Sifat Inertia yang diserahkan kepada komponen kelas atau dikongsi untuk semua bahagian hadapan, anda boleh melakukan ini:

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

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

); } Walau bagaimanapun, pendekatan yang paling biasa bagi saya adalah dengan hanya memberikan nama pembolehubah yang sama yang dihantar ke Inertia-Component dalam Laravel ke React-Component-Props, seperti yang ditunjukkan di bawah. Pada pendapat saya ini sepatutnya sesuai dengan kes penggunaan anda dengan sempurna:

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

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

); }

Jika anda ingin mengetahui lebih lanjut tentang Inersia, saya amat mengesyorkan membaca dokumentasi. Pembangun melakukan kerja yang baik untuk menerangkan segala-galanya supaya Laravel dan React Devs yang tidak berpengalaman dapat memahami perkara yang sedang berlaku. Ia benar-benar tidak boleh dibaca, tetapi menunjukkan beberapa fungsi yang menarik: https://inertiajs.com/