如何使用服务器端错误更新客户端错误 object

Question

注册.jsx

import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";
import _ from "lodash";
import Joi from "joi-browser";

import useForm from "../../utils/useForm";
import { register } from "../../store/auth/authActions";

const Register = () => {
    const formInput = {
        name: "",
        email: "",
        password: "",
        password_confirmation: "",
    };

    const schema = {
        name: Joi.string().required().min(3).max(191).label("Name"),
        email: Joi.string()
            .email()
            .required()
            .min(3)
            .max(191)
            .label("Email Address"),
        password: Joi.string().required().min(8).max(191).label("Password"),
        password_confirmation: Joi.any()
            .valid(Joi.ref("password"))
            .required()
            .options({
                language: {
                    any: {
                        allowOnly: "!!Passwords do not match",
                    },
                },
            }),
    };

    const { handleChange, handleSubmit, formData, errors } = useForm(
        formInput,
        doSubmit,
        schema
    );

    const dispatch = useDispatch();

    function doSubmit() {
        dispatch(register(formData));
    }

    const serverSideErrors = useSelector((state) => state.auth.registerErrors);
    console.log("errors >>", errors);

    return (
        <div className="account-pages mt-5 mb-5">
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8 col-lg-6 col-xl-5">
                        <div className="text-center">
                            <strong className="text-muted mt-2 mb-4">
                                {process.env.MIX_APP_NAME}
                            </strong>
                        </div>
                        <div className="card">
                            <div className="card-body p-4">
                                <div className="text-center mb-4">
                                    <h4 className="text-uppercase mt-0">
                                        REGISTER
                                    </h4>
                                </div>

                                <form action="#" onSubmit={handleSubmit}>
                                    <div className="form-group mb-3">
                                        <label htmlFor="name">Name</label>
                                        <input
                                            className={`form-control ${
                                                errors["name"]
                                                    ? "is-invalid"
                                                    : ""
                                            }`}
                                            type="text"
                                            id="name"
                                            name="name"
                                            required=""
                                            placeholder="Enter your name"
                                            onChange={handleChange}
                                            value={formData.name}
                                        />
                                        <span
                                            className={
                                                errors["name"]
                                                    ? "invalid-feedback d-inline-block"
                                                    : "d-none"
                                            }
                                        >
                                            {errors["name"]}
                                        </span>
                                    </div>

                                    <div className="form-group mb-3">
                                        <label htmlFor="email">
                                            Email address
                                        </label>
                                        <input
                                            className={`form-control ${
                                                errors["email"]
                                                    ? "is-invalid"
                                                    : ""
                                            }`}
                                            type="text"
                                            id="email"
                                            name="email"
                                            required=""
                                            placeholder="Enter your email"
                                            onChange={handleChange}
                                            value={formData.email}
                                        />
                                        <span
                                            className={
                                                errors["email"]
                                                    ? "invalid-feedback d-inline-block"
                                                    : "d-none"
                                            }
                                        >
                                            {errors["email"]}
                                        </span>
                                    </div>

                                    <div className="form-group mb-3">
                                        <label htmlFor="password">
                                            Password
                                        </label>
                                        <input
                                            className={`form-control ${
                                                errors["password"]
                                                    ? "is-invalid"
                                                    : ""
                                            }`}
                                            type="password"
                                            required=""
                                            id="password"
                                            name="password"
                                            placeholder="Enter your password"
                                            onChange={handleChange}
                                            value={formData.password}
                                        />
                                        <span
                                            className={
                                                errors["password"]
                                                    ? "invalid-feedback d-inline-block"
                                                    : "d-none"
                                            }
                                        >
                                            {errors["password"]}
                                        </span>
                                    </div>

                                    <div className="form-group mb-3">
                                        <label htmlFor="password_confirmation">
                                            Confirm Password
                                        </label>
                                        <input
                                            className={`form-control ${
                                                errors["password_confirmation"]
                                                    ? "is-invalid"
                                                    : ""
                                            }`}
                                            type="password"
                                            required=""
                                            id="password_confirmation"
                                            name="password_confirmation"
                                            placeholder="Confirm Pasword"
                                            onChange={handleChange}
                                            value={
                                                formData.password_confirmation
                                            }
                                        />
                                        <span
                                            className={
                                                errors["password_confirmation"]
                                                    ? "invalid-feedback d-inline-block"
                                                    : "d-none"
                                            }
                                        >
                                            {errors["password_confirmation"]}
                                        </span>
                                    </div>

                                    <div className="form-group">
                                        <div className="custom-control custom-checkbox">
                                            <input
                                                type="checkbox"
                                                className="custom-control-input"
                                                id="checkbox-signup"
                                            />
                                            <label
                                                className="custom-control-label"
                                                htmlFor="checkbox-signup"
                                            >
                                                I accept{" "}
                                                <a
                                                    href="#"
                                                    className="text-dark"
                                                >
                                                    Terms and Conditions
                                                </a>
                                            </label>
                                        </div>
                                    </div>

                                    <div className="form-group mb-0 text-center">
                                        <button
                                            className="btn btn-primary btn-block"
                                            type="submit"
                                        >
                                            {" "}
                                            Register
                                        </button>
                                    </div>
                                </form>
                            </div>
                            {/* <!-- end card-body --> */}
                        </div>
                        {/* <!-- end card --> */}

                        <div className="row mt-3">
                            <div className="col-12 text-center">
                                <p>
                                    <Link to="#" className="text-muted ml-1">
                                        <i className="fa fa-lock mr-1"></i>
                                        Forgot your password?
                                    </Link>
                                </p>
                                <p className="text-muted">
                                    Don't have an account?{" "}
                                    <Link to="#" className="text-dark ml-1">
                                        <b>Sign Up</b>
                                    </Link>
                                </p>
                            </div>
                            {/* <!-- end col --> */}
                        </div>
                        {/* <!-- end row --> */}
                    </div>
                    {/* <!-- end col --> */}
                </div>
                {/* <!-- end row --> */}
            </div>
            {/* <!-- end container --> */}
        </div>
        // {/* <!-- end page --> */}
    );
};

export default Register;

使用Form.js

import { useState, useEffect } from "react";
import Joi from "joi-browser";

const useForm = (formInput, callback, schema = {}) => {
    const [formData, setFormData] = useState(formInput);
    const [errors, setErrors] = useState({});
    const [isSubmitting, setIsSubmitting] = useState(false);

    const handleChange = (event) => {
        const { name, value } = event.target;
        setFormData({
            ...formData,
            [name]: value,
        });
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        //handle error
        setErrors(validate(formData));
        setIsSubmitting(true);
    };

    const validate = (formData) => {
        const { error } = Joi.validate(formData, schema, {
            abortEarly: false,
        });
        if (!error) return {};

        const validataionErrors = {};
        for (let item of error.details) {
            validataionErrors[item.path[0]] = item.message;
        }
        return validataionErrors;
    };

    useEffect(() => {
        //check if there are any errors
        if (Object.keys(errors).length === 0 && isSubmitting) {
            console.log("submitted");
            callback();
        }
    }, [errors]);

    return {
        handleChange,
        handleSubmit,
        formData,
        errors,
    };
};

export default useForm;

authActions.js

import axios from "axios";
import { authActions } from "./authSlice";

import auth from "../../services/authService";

export const register = (data) => async (dispatch) => {
    console.log("login called from actions");
    try {
        const response = await auth.register(data);
        console.log("data received on api call>>", response);
        dispatch(
            authActions.REGISTER_SUCCESS({
                user: data,
            })
        );
    } catch (error) {
        console.log("errors >>", error.response.data);
        dispatch(
            authActions.REGISTER_FAIL({
                registerError:
                    error.response && error.response.data.errors
                        ? error.response.data.errors
                        : error.message,
            })
        );
    }
};

此处，并未显示此处包含的所有文件的所有代码。 但是这3个文件应该足以理解这个概念。 但是，如果您需要额外的，请告诉我。

在这里，我使用了自定义 Hooks UseForm来处理诸如handleChange and handleSubmit类的共享任务。 另外，我验证了 function，它使用 Joi Schema 并更新 localState errors ，然后返回它。

而且，现在当客户端验证完成时，表单将被提交，但从服务器返回Email already used的验证错误。 在这里，此服务器端错误也以完全相同的格式返回，无需修改。

而且，仅供参考，我使用了以下代码：

const serverSideErrors = useSelector((state) => state.auth.registerErrors);

现在，我想知道使用serverSideErrors更新本地 state errors的最佳和最安全的方法是什么，或者让我知道是否有其他更好的方法来处理这种情况。