Laravel+Breeze+React栈中如何获取并展示post请求的后端返回值？

Laravel Breeze React栈里的useForm是基于Inertia.js封装的，默认的post()方法不是普通的Ajax请求Promise，直接用.then()自然没法拿到返回值。下面给两种可行的解决方式：

方式一：用async/await接收Promise返回值 #

useForm的post()方法其实会返回一个Promise，你可以用异步函数来接收响应数据：

import { useForm } from '@inertiajs/react';
import { route } from 'ziggy-js';

export default function Register() {
    const { data, post, processing, errors } = useForm({
        name: '',
        email: '',
        password: '',
        password_confirmation: '',
    });

    const submit = async (e) => {
        e.preventDefault();

        try {
            // 等待post请求完成，拿到响应
            const response = await post(route('register'));
            // 后端返回的数据在response.data里
            console.log('后端返回数据：', response.data);
            // 示例：展示返回的用户信息
            alert(`注册成功！你的用户名是：${response.data.user.name}`);
        } catch (err) {
            // 处理请求错误
            console.error('提交失败：', err);
        }
    };

    return (
        <form onSubmit={submit}>
            {/* 表单字段 */}
            <button type="submit" disabled={processing}>注册</button>
        </form>
    );
}

方式二：通过配置项的onSuccess回调处理 #

在调用post()时传入配置对象，用onSuccess回调接收后端返回的响应：

const submit = (e) => {
    e.preventDefault();

    post(route('register'), {
        onSuccess: (response) => {
            // 在这里处理返回数据
            console.log('成功返回的数据：', response.data);
            // 比如把数据存到组件state里展示
            // setUser(response.data.user);
        },
        onError: (errors) => {
            // 处理验证错误或请求失败
            console.error('错误信息：', errors);
        }
    });
};

后端需要配合调整返回逻辑 #

默认的Breeze注册控制器会直接重定向到首页，你需要修改RegisterController的store方法，返回数据而不是重定向：

// app/Http/Controllers/Auth/RegisterController.php
public function store(Request $request)
{
    $request->validate([
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
        'password' => ['required', 'string', 'confirmed', \Illuminate\Validation\Rules\Password::defaults()],
    ]);

    $user = \App\Models\User::create([
        'name' => $request->name,
        'email' => $request->email,
        'password' => \Illuminate\Support\Facades\Hash::make($request->password),
    ]);

    event(new \Illuminate\Auth\Events\Registered($user));
    \Illuminate\Support\Facades\Auth::login($user);

    // 替换原来的redirect，返回包含用户数据的响应
    return response()->json([
        'success' => true,
        'user' => $user
    ]);
    // 或者如果要继续用Inertia视图，返回带数据的inertia响应
    // return inertia('Dashboard', ['user' => $user]);
}

这样前端就能正确拿到后端返回的用户对象或其他数据了。

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