Laravel从后端到前端的惯性渲染数据

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');

我目前不知道如何调用categories在前端使用reactjs。我该怎么做呢?

Answer 1

我有时通过使用惯性的内置usePage-Hook来访问传递的道具。当您正在处理所有前端组件都可以访问的共享数据时(https://inertiajs.com/shared-data)，这将派上用场。只要你的后端(Laravel)代码工作正常，实际的categories-属性被移交给类别组件或为所有前端共享，你可以这样做:

import React from 'react';    
import { usePage } from '@inertiajs/inertia-react';

function App() {
const categories = usePage().props.categories;

return (
<ul>
{categories.map((category) =>
(<li>{category}</li>))}
</ul>
);
}

对我来说，最常见的做法是简单地给出你在Laravel中传递到惯性组件到React-Component-Props中的相同变量名，就像这样。对我来说，它看起来应该完美地工作与您的用例:

import React from 'react';    

function App({categories}) {        
return (
<ul>
{categories.map((category) =>
(<li>{category}</li>))}
</ul>
);
}

如果你想找到更多关于惯性，我强烈建议你去看文档。开发人员在解释一切方面做得很好，所以没有经验的Laravel和React Dev可以理解发生了什么。它实际上读起来并不多，但显示了一些有趣的特征:https://inertiajs.com/