Laravel Inertia+ReactJS：如何在前端调用后端传递的categories数据？

问题描述 #

我是Laravel Inertia结合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数据，请问该如何操作？

解决方案 #

在Inertia中，后端通过Inertia::render传递的数据会作为props直接传入对应的React组件，你可以这样获取并渲染：

1. 函数式组件（React 16.8+ 推荐写法） #

假设你的组件文件是resources/js/Pages/Admin/Categories.jsx，直接解构props中的categories即可：

import React from 'react';

export default function Categories({ categories }) {
  return (
    <div>
      <h1>主分类列表</h1>
      <ul>
        {/* 循环渲染分类项 */}
        {categories.map(category => (
          <li key={category.main_category_id}>
            {category.main_category_name}
          </li>
        ))}
      </ul>
    </div>
  );
}

2. 类组件写法（兼容旧版本） #

如果使用类组件，可以通过this.props获取数据：

import React, { Component } from 'react';

export default class Categories extends Component {
  render() {
    const { categories } = this.props;
    return (
      <div>
        <h1>主分类列表</h1>
        <ul>
          {categories.map(category => (
            <li key={category.main_category_id}>
              {category.main_category_name}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

注意事项 #

• 循环渲染列表时，必须给每个子元素添加唯一的key属性，这里用数据库主键main_category_id能保证唯一性，避免React渲染警告。
• 如果需要对数据做过滤、排序等处理，既可以在前端组件内直接操作categories数组，也可以在后端控制器中提前处理完成后再传递给前端。

内容的提问来源于stack exchange，提问作者Jheems