Пытается отобразить ошибки проверки в React JS при использовании Laravel Passport - PullRequest
Новая
       33

Пытается отобразить ошибки проверки в React JS при использовании Laravel Passport

1 голос
/ 04 апреля 2019

Я создаю свою первую систему 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'
        ];
    }
}

Который запускается с конечной точки /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); - это прекрасно работает, я вижу их в консоли так:

enter image description here

Мой метод контроллера такой, ничего сумасшедшего: 

    {
        // 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, но он всегда возвращает «неопределенное», предположительно, потому что маршруты не меняются.

Есть ли лучший способ отобразить ошибки, которые система отправляет обратно? Сейчас я немного растерялся.

Спасибо!

1 Ответ

1 голос
/ 05 апреля 2019

Таким образом, я достиг этого, выполнив пару вещей:

Прежде всего, я создал новый дочерний компонент для обработки отображения ошибок, 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, на самом деле не содержат ничего, что я мог бы использовать в качестве уникального ключа для каждого элемента. Этот пакет , кажется, работает очень хорошо в моем случае.

Причина, по которой моя первоначальная идея перебирать массив ошибок с помощью .map не удалась, заключается в том, что Laravel фактически отправлял мне обратнообъект, а не массив.Так что переключение этой идеи на что-то, что зацикливалось на объекте, работало отлично - Object.keys(errors).map((error, index)

...