javascript - 使用 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");
            });
    };

您可以在底部看到我正在 try catch 错误并使用 console.log(error.response.data.errors); 将它们记录到控制台 - 这很好用，我可以像这样在控制台中看到它们:

我的 Controller 方法是这样的，没有什么疯狂的:

    {
        // 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]);
    }

但我现在要做的是在我的表单下方的注册页面上显示错误。我已经尝试在状态(我正在执行控制台日志的地方)中设置错误，然后将它们作为 Prop 传递给我的 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 文件的顶部。

从“./Error”导入错误；

然后在 Register.js 的 render() 函数中我添加了这个 block :

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

你会注意到我使用 shortid.generate() 作为我的 key ，这是因为我从 Laravel 收到的数据实际上并不包含任何我可以用作唯一 key 的东西对于每个项目。 This package似乎对我来说效果很好。

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