Inertia.js与React中通过ID/Slug获取单条数据及数据提交问题

一、从Laravel控制器传递单条数据到React视图 #

1. Laravel控制器实现 #

直接通过Inertia::render将单条模型数据传递给React页面，Inertia会自动完成模型序列化：

// app/Http/Controllers/UserController.php
use Inertia\Inertia;
use App\Models\User;

public function show($id)
{
    $user = User::findOrFail($id);
    // 直接传递模型，或通过资源类自定义返回字段
    return Inertia::render('Users/Show', [
        'user' => $user
        // 若需自定义字段，可改用资源类：new UserResource($user)
    ]);
}

配置路由：

// routes/web.php
use App\Http\Controllers\UserController;

Route::get('/users/{id}', [UserController::class, 'show'])->name('users.show');

2. React视图接收数据 #

使用Inertia提供的usePage钩子直接获取传递的props：

// resources/js/Pages/Users/Show.jsx
import { usePage } from '@inertiajs/react';

export default function ShowUser() {
    const { user } = usePage().props;

    return (
        <div className="user-details">
            <h1>{user.name}</h1>
            <p>邮箱：{user.email}</p>
        </div>
    );
}

注：若需控制模型序列化字段，可在Laravel模型中定义$visible属性，或使用API资源类过滤数据。

二、React视图向Laravel控制器提交批量数据 #

1. React端提交逻辑 #

可直接使用Inertia.post方法，或结合useForm钩子简化表单状态管理，以下是批量删除用户的示例：

// resources/js/Pages/Users/Index.jsx
import { usePage, Inertia } from '@inertiajs/react';
import { useState } from 'react';

export default function UsersIndex() {
    const { users } = usePage().props;
    const [selectedIds, setSelectedIds] = useState([]);

    const toggleSelect = (userId) => {
        setSelectedIds(prev => 
            prev.includes(userId) 
                ? prev.filter(id => id !== userId) 
                : [...prev, userId]
        );
    };

    const handleBatchDelete = () => {
        if (!selectedIds.length) return;
        
        Inertia.post(route('users.batch-delete'), {
            user_ids: selectedIds
        }, {
            onSuccess: () => {
                Inertia.reload(); // 成功后刷新页面
            },
            onError: (errors) => {
                console.log(errors); // 处理错误
            }
        });
    };

    return (
        <div>
            <button 
                onClick={handleBatchDelete} 
                disabled={!selectedIds.length}
                className="batch-btn"
            >
                批量删除选中用户
            </button>
            <ul className="user-list">
                {users.map(user => (
                    <li key={user.id}>
                        <input
                            type="checkbox"
                            checked={selectedIds.includes(user.id)}
                            onChange={() => toggleSelect(user.id)}
                        />
                        <span>{user.name}</span>
                    </li>
                ))}
            </ul>
        </div>
    );
}

注：route函数由Laravel Ziggy包提供，若未安装可直接替换为URL字符串（如'/users/batch-delete'）。

2. Laravel控制器接收处理 #

验证批量数据后执行对应操作：

// app/Http/Controllers/UserController.php
use Illuminate\Http\Request;
use App\Models\User;

public function batchDelete(Request $request)
{
    // 验证提交的数据格式
    $validated = $request->validate([
        'user_ids' => 'required|array|exists:users,id'
    ]);

    // 执行批量操作（此处为删除，可替换为更新等逻辑）
    User::whereIn('id', $validated['user_ids'])->delete();

    // 返回成功响应，支持闪存消息
    return redirect()->route('users.index')->with('success', '批量操作完成');
}

配置路由：

// routes/web.php
Route::post('/users/batch-delete', [UserController::class, 'batchDelete'])->name('users.batch-delete');

可选：使用useForm钩子简化状态管理，自动处理表单提交、加载状态等。

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