在Inertia React中如何获取Laravel后端返回的成功提示与购物车数据？

后端背景 #

假设你的Laravel后端代码逻辑如下：

public function store(Request $request)
{
    // 执行购物车创建逻辑
    $cart = Cart::create($request->validated());

    // 重定向并将数据闪存到Session
    return redirect()->route('cart.index')
        ->with('success', '购物车创建成功')
        ->with('cart', $cart);
}

步骤1：在Laravel中共享Session闪存数据 #

Inertia不会自动同步Laravel的Session闪存数据到前端，需要在HandleInertiaRequests中间件中配置共享规则：

打开app/Http/Middleware/HandleInertiaRequests.php，修改share方法，添加闪存数据的共享逻辑：

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        // 共享Session中的闪存数据，用闭包延迟加载避免性能浪费
        'flash' => [
            'success' => fn () => $request->session()->get('success'),
            'cart' => fn () => $request->session()->get('cart'),
        ],
    ]);
}

步骤2：在React前端获取数据 #

在你的React组件中，通过usePage钩子提取共享的闪存数据：

1. 先导入usePage：

import { usePage } from '@inertiajs/react';

2. 在组件中使用数据：

function CartIndex() {
    const { flash } = usePage().props;

    // 提取成功提示和购物车数据
    const successMsg = flash.success;
    const cart = flash.cart;

    return (
        <div>
            {successMsg && <div className="alert-success">{successMsg}</div>}
            {cart && (
                <div className="cart-card">
                    <h4>购物车ID：{cart.id}</h4>
                    {/* 渲染更多购物车详情字段 */}
                </div>
            )}
        </div>
    );
}

export default CartIndex;

替代方案：直接用Inertia重定向传递数据 #

如果可以修改后端代码，也可以跳过Session，直接用Inertia的重定向方法传递数据：

use Inertia\Inertia;

public function store(Request $request)
{
    $cart = Cart::create($request->validated());

    return Inertia::redirect('/cart', [
        'success' => '购物车创建成功',
        'cart' => $cart,
    ]);
}

这种情况下，前端无需配置中间件，直接从usePage().props中提取数据：

const { success, cart } = usePage().props;

注意事项 #

• Session闪存数据是一次性的，页面刷新后会被清除，适合临时提示类场景。
• 如果需要持久化数据，建议直接通过Inertia props传递，或存入前端状态管理工具（如Zustand、Redux）。

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