如何将 Laravel 服务器中的 return 值与惯性 js 反应？

Question

我正在尝试从 Laraval 服务器使用 InertiaJS 在 React 中的 post 之后显示一条消息。

根据我在文档/在线/其他（半）相关问题中可以找到的内容，以下是我认为应该有效的孤立版本 - 我觉得它应该添加到我的道具中。我的测试组件确实重新加载，因此重定向在没有消息和道具未定义的情况下工作 - 我不明白什么？

Laravel 控制器：

use Illuminate\Support\Facades\Redirect;
use Inertia\Inertia;
use Illuminate\Routing\Controller as BaseController;

class TestController extends BaseController
{
    function test(){
       return Inertia::render('Test');
    }

    function testResponse(){
        //dd("I GET TO HERE, SO ITS NOT A ROUTING ISSUE!")
        return Redirect::back()->with('message', 'Test message from server.');
    }
}

我的 React 测试组件

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

const Test = (props) => {

    const [serverMessage, setServerMessage] = useState('no message');



  return <div>
      <div>{serverMessage}</div>
      <Link className="hover:bg-blue-700 bg-blue-400 text-white py-1 px-3 rounded" href={route('testResponse')} method="post" as="button">
          Get Server Response
      </Link>
  </div>;
};

export default Test;

Answer 1

这是因为flash message没有传递给react组件。为此，您需要修改 HandleInertiaRequest.php 以添加全局可访问的 flash 消息道具。这意味着道具适用于所有页面。

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'auth' => [
            'user' => $request->user(),
        ],
        'flash' => [
            'message' => fn () => $request->session()->get('message'),
        ],
    ]);
}

那么，在/resource/js/pages/Test.jsx中，就会有如下代码

import { Link } from '@inertiajs/inertia-react'
import React, { useEffect, useState } from 'react'

const Test = (props) => {
    const [serverMessage, setServerMessage] = useState('no message')

    console.log('Test.jsx props: ', props)

    useEffect(() => {
        const {
            flash: { message = '' },
        } = props
        if (message) {
            setServerMessage(message)
        }
    }, [props.flash.message])

    return (
        <div>
            <div>{serverMessage}</div>
            <Link
                className='hover:bg-blue-700 bg-blue-400 text-white py-1 px-3 rounded'
                href={route('testResponse')}
                method='post'
                as='button'
            >
                Get Server Response
            </Link>
        </div>
    )
}

export default Test

顺便说一句，您缺少顶部的 useState 导入。

然后在 web.php 中你应该这样定义路由：

use App\Http\Controllers\TestController;

Route::get('/test', [TestController::class, 'test'])->name('test');
Route::post('/testResponse', [TestController::class, 'testResponse'])->name('testResponse');

其实这个在惯性js中是有记载的。查看 https://inertiajs.com/shared-data

如何将 Laravel 服务器中的 return 值与惯性 js 反应？

how to return values from a Laravel Sever to React with inertiajs?

inertiajs

laravel

reactjs