inertia.js 从 Interia.post() 获取响应消息

Question

我正在使用 Inertia.js React.js 和 Stripe 网站的一部分有一个表单，允许使用 stripe 进行贡献。我已经可以使用了，但是如果付款成功就很难收到消息

这是我的表单组件

export default () => {
    const { data, setData, processing, errors } = useForm<FormProps>({
        email: "",
        name: "",
        amount: "",
    });
    const stripe = useStripe();
    const elements = useElements();

    const handleSubmit = async (e: React.SyntheticEvent) => {
        e.preventDefault();

        const { errors, paymentMethod } = await stripe?.createPaymentMethod({
            type: "card",
            card: elements?.getElement(CardElement),
        });

        if (!errors) {
            const { id } = paymentMethod;

            try {
                const response = Inertia.post("/", {
                    name: data.name,
                    email: data.email,
                    amount: data.amount,
                    paymentId: id,
                });
                console.log(response, " response");
            } catch (errors) {
                console.log(errors, " Catch Errors");
            }
        }
    };
    return (
        <form onSubmit={handleSubmit} noValidate>
            <Errors errors={errors} />
            <Row>
                <Input
                    type="email"
                    name="email"
                    placeholder="Email Address"
                    required={true}
                    value={data.email}
                    onChange={(e) => setData("email", e.target.value)}
                />
                <Input
                    type="text"
                    name="name"
                    placeholder="Name on Card"
                    required={true}
                    value={data.name}
                    onChange={(e) => setData("name", e.target.value)}
                />
            </Row>
            <Row>
                <Input
                    type="number"
                    name="amount"
                    placeholder="£"
                    required={true}
                    css={{ width: "80px" }}
                    value={data.amount}
                    onChange={(e) => setData("amount", e.target.value)}
                />

                <CardElement
                    className="card"
                    options={{
                        style: {
                            base: {
                                backgroundColor: "white",
                            },
                        },
                    }}
                />
            </Row>
            <Row>
                <Button
                    processing={processing}
                    type={"submit"}
                    color={"secondary"}
                >
                    {processing ? "Sending..." : "Contribute"}
                </Button>
            </Row>
        </form>
    );
};

console.log(response)只是return未定义

我的投稿控制器

class ContributionController extends Controller
{
    public function processContribution(Request $request)
    {

        $email = $request->get('email');
        $amount = $request->get('amount') * 100;
        $paymentMethod = $request->get('paymentId');

        $request->validate([
            'email' => 'required',
            'name' => 'required',
            'amount' => 'required',
        ]);

        try {

            (new User)->charge($amount, $paymentMethod, [
                'currency' => 'gbp',
                'receipt_email' => $email
            ]);
            return Inertia('Home', [
                'message' => 'Your contribution was successful, thank you.',
            ]);
        } catch (Exception $e) {

            return Inertia('Home', [
                'errors' => $e,
            ]);
        }
    }
}

任何帮助都会很棒，我希望我可以将数据数组传递到我的控制器上的 return 并以这种方式访问消息，但我似乎无法获取它。

Answer 1

不确定这样做是否正确，但我发现我是否将 post 请求从

更改为

Inertia.post("/", {
    preserveScroll: true,
});

至

post("/", {
    preserveScroll: true,
});

提交表单时显示消息。

inertia.js 从 Interia.post() 获取响应消息

inertia.js get response message from Interia.post()

inertiajs

laravel

reactjs