使用 Laravel Passport 时难以在 React JS 中显示验证错误

Question

我正在构建我的第一个 React JS 系统并使用 Laravel Passport 进行身份验证。在我尝试提交无效数据之前，它一直运行良好。当我发送我的发布请求时，我设置了以下请求类：

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class RegisterUser extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users',
            'password' => 'required|string|confirmed|min:8'
        ];
    }
}

这是从以下 React JS 方法中看到的 /api/register 端点触发的：

registrationHandler = e => {
        e.preventDefault();

        $("#email-login-btn")
            .attr("disabled", "disabled")
            .html(
                '<i class="fas fa-spinner fa-spin fa-1x fa-fw"></i><span class="sr-only">Loading...</span>'
            );

        var formData = new FormData();
        formData.append("email", e.target.elements.email.value);
        formData.append("name", e.target.elements.name.value);
        formData.append("password", e.target.elements.password.value);
        formData.append(
            "password_confirmation",
            e.target.elements.password_confirmation.value
        );

        axios
            .post("/api/register", formData)
            .then(response => {
                return response;
            })
            .then(json => {
                if (json.status == 201) {
                    const MySwal = withReactContent(
                        Swal.mixin({
                            toast: true,
                            position: "top-end",
                            showConfirmButton: false,
                            timer: 3000
                        })
                    );

                    MySwal.fire({
                        type: "success",
                        title: "Registered successfully"
                    });
                } else {
                    $("#email-login-btn")
                        .removeAttr("disabled")
                        .html("Register");
                }
            })
            .catch(error => {
                console.log(error.response.data.errors);
                $("#email-login-btn")
                    .removeAttr("disabled")
                    .html("Register");
            });
    };

您可以在底部看到我正在尝试捕获错误并使用console.log(error.response.data.errors); 将它们记录到控制台 - 这很好，我可以在控制台中看到它们，如下所示：

我的控制器方法是这样的，没什么疯狂的：

    {
        // If validation hasn't failed, register the user
        User::create([
            'name' => request('name'),
            'email' => request('email'),
            'password' => bcrypt(request('password'))
        ]);

        return response()->json(['status' => 201]);
    }

但我现在要做的是在我的表单下的注册页面上显示错误。我尝试在状态内设置错误（我正在执行控制台日志），然后将它们作为道具传递给我的Register.js 文件，但它总是返回“未定义”，大概是因为路由没有改变。

有没有更好的方法来显示系统发回的错误？我目前对此有点茫然。

谢谢！

Answer 1

所以我通过做几件事来实现这一点：

首先，我创建了一个新的子组件来处理错误的显示，Error.js

import React from "react";

class Error extends React.Component {
    render() {
        return (
            <>
                <li className="text-danger">{this.props.message}</li>
            </>
        );
    }
}

export default Error;

然后我将它导入到我的 Register.js 文件的顶部。

import Error from "./Error";

然后在Register.js里面的render()函数中我添加了这个块：

<ul>
    {Object.keys(errors).map((error, index) => (
        <Error
            message={errors[error][0]}
            key={shortid.generate()}
        />
    ))}
</ul>

你会注意到我使用shortid.generate() 作为我的密钥，这是因为我从 Laravel 收到的数据实际上并没有包含我可以用作每个项目的唯一密钥的任何内容。 This package 在我的情况下似乎工作得很好。

我最初使用 .map 遍历错误数组的想法失败的原因是 Laravel 实际上是在向我发送一个对象，而不是一个数组。因此，将这个想法转换为在对象上循环的东西效果很好 - Object.keys(errors).map((error, index)