Question

我正在构建我的第一个React JS系统，并使用Laravel Passport进行身份验证。在尝试提交无效数据之前，我的工作情况非常好。发送发帖请求时，我将设置以下Request类：

<?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'
        ];
    }
}

从/api/register端点触发的哪个事件在以下React JS方法中看到：

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

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

是否有更好的方法来显示系统发回的错误？我现在对此有点茫然。

谢谢！

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";

然后在render()内的Register.js函数中添加以下代码段：

<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)

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

1 个答案: