如何使用inertiajs从Laravel服务器返回值到React？

Question

我正在尝试使用 InertiaJS 从 Laraval 服务器在 React 中发布帖子后显示一条消息。

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

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消息没有传递到react组件。为此，您需要修改

HandleInertiaRequest.php

以添加可全局访问的 flash 消息的 props。这意味着道具适用于所有页面。

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