当状态通过时，反应钩子形式显示错误块

Question

根据下面的回复，我现在有以下内容

import { useState } from "react";
import Head from "next/head";
import Link from "next/link";
import Image from "next/image";
import Background from "../../../../public/images/option1.png";
import Router from "next/router";
import { signIn } from "next-auth/client";
import { useForm } from "react-hook-form";
import { ErrorMessage } from "@hookform/error-message";
import { SaveIcon } from "@heroicons/react/outline";

export default function Confirm() {
  const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm({
    criteriaMode: "all",
  });

  const [old_password, setOldPassword] = useState("");
  const [password, setPassword] = useState("");
  const [confirm_password, setConfirmPassword] = useState("");

  const onSubmit = async () => {
    const status = await signIn("credentials", {
      redirect: false,
      email: email,
    });

    Router.push("/dashboard");
  };

  return (
    <>
      <Head>
        <title>Ellis Development - Confirm Password</title>
      </Head>

      <div className="relative">
        <div className="md:flex">
          {/* Image */}
          <div className="flex items-center justify-center bg-blue-700 h-screen lg:w-96">
            <Image src={Background} width={350} height={350} layout="fixed" />
          </div>

          {/* Contact form */}
          <div className="flex flex-col justify-center py-10 px-6 sm:px-10 w-full">
            <h1 className="text-4xl font-extrabold text-grey-800">
              Reset your password
            </h1>

            {/* errors */}
            <ErrorMessage
              errors={errors}
              name="formErrors"
              render={({ messages }) =>
                messages && (
                  <div className="mt-6 border-2 border-red-600">
                    <div className="bg-red-600 text-white py-2 px-4">
                      <h6>Following errors have occurred</h6>
                    </div>

                    <div className="text-grey-800 py-2 px-4">
                      <div className="flex flex-col gap-2">
                        {Object.entries(messages).map(([type, message]) => (
                          <div
                            className="flex flex-col gap-y-6 sm:gap-x-8"
                            key={type}
                          >
                            <small className="text-red-500">{message}</small>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                )
              }
            />

            <form
              onSubmit={handleSubmit(onSubmit)}
              className="mt-6 flex flex-col gap-y-6 sm:gap-x-8"
            >
              {/* old_password field */}
              <div>
                <label
                  htmlFor="old_password"
                  className="block text-sm font-medium text-gray-900"
                >
                  Old Password
                </label>

                <div className="mt-1">
                  <input
                    {...register("formErrors", {
                      required: "Old password is required",
                    })}
                    type="password"
                    name="old_password"
                    id="old_password"
                    className="py-3 px-4 block w-full shadow-sm text-gray-900 focus:ring-blue-700 focus:border-blue-900 border-gray-300 rounded-md"
                    onChange={(event) => setOldPassword(event.target.value)}
                  />
                </div>
              </div>

              {/* password field */}
              <div>
                <label
                  htmlFor="password"
                  className="block text-sm font-medium text-gray-900"
                >
                  Password
                </label>

                <div className="mt-1">
                  <input
                    {...register("formErrors", {
                      required: "Password is required",
                    })}
                    type="password"
                    name="password"
                    id="password"
                    className="py-3 px-4 block w-full shadow-sm text-gray-900 focus:ring-blue-700 focus:border-blue-900 border-gray-300 rounded-md"
                    onChange={(event) => setPassword(event.target.value)}
                  />
                </div>
              </div>

              {/* confirm_password field */}
              <div>
                <label
                  htmlFor="confirm_password"
                  className="block text-sm font-medium text-gray-900"
                >
                  Confirm Password
                </label>

                <div className="mt-1">
                  <input
                    {...register("formErrors", {
                      required: "Confirm password is required",
                    })}
                    type="password"
                    name="confirm_password"
                    id="confirm_password"
                    className="py-3 px-4 block w-full shadow-sm text-gray-900 focus:ring-blue-700 focus:border-blue-900 border-gray-300 rounded-md"
                    onChange={(event) => setConfirmPassword(event.target.value)}
                  />
                </div>
              </div>

              <div className="flex items-center justify-between sm:col-span-2">
                <div>
                  <button
                    type="submit"
                    className="mt-2 mr-2 w-full inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-700 hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-700 sm:w-auto"
                  >
                    <SaveIcon className="w-4 h-4 mr-4" />
                    Submit
                  </button>
                </div>

                <div>
                  <Link href="/dashboard/auth/login">
                    <a className="underline decoration-blue-500 decoration-4 hover:decoration-2 mr-4">
                      Login
                    </a>
                  </Link>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}

但是，只显示了一个错误，

有多个输入字段，我查看了文档，但不确定我做错了什么。

原题我目前正在使用 react-hook-form 库，我在表单上方遇到了所有错误

{/* errors */}
{errors.length > 0 && (
  <div className="mt-6 border-2 border-red-600">
    <div className="bg-red-600 text-white py-2 px-4">
      <h4>{errors.length} errors occurred:</h4>
    </div>

    <div className="text-grey-800 py-2 px-4">
      <div className="flex flex-col gap-2">
        {/* old_password errror */}
        <div className="flex flex-col gap-y-6 sm:gap-x-8">
          {errors.old_password && (
            <small className="text-red-500">
              &bull; Old password is required
            </small>
          )}
        </div>

        {/* password error */}
        <div className="flex flex-col gap-y-6 sm:gap-x-8">
          {errors.password && (
            <small className="text-red-500">
              &bull; Password is required
            </small>
          )}
        </div>

        {/* confirm_password errror */}
        <div className="flex flex-col gap-y-6 sm:gap-x-8">
          {errors.confirm_password && (
            <small className="text-red-500">
              &bull; Confirm password is required
            </small>
          )}
        </div>
      </div>
    </div>
  </div>
)}

这行得通并且显示了错误，不确定是否有一种方法可以映射错误以使代码更清晰，所以任何想法都会很棒。

但是，如何隐藏错误块，我有 {errors.length > 0 && (，但这似乎不起作用。

这是视觉效果

任何帮助都会很棒。

Answer 1

因为 errors 是一个对象 .length 对它不起作用。但是你可以使用 Object.keys(errors).length > 0 来动态显示错误块。类似的东西：

{Object.keys(errors).length > 0 && (
  <div className="mt-6 border-2 border-red-600">
    <div className="bg-red-600 text-white py-2 px-4">
      <h6>Following errors have occurred</h6>
    </div>
    <div className="text-grey-800 py-2 px-4">
      <div className="flex flex-col gap-2">
        {/* Here you put one ErrorMessage for each input*/}
        <ErrorMessage
          errors={errors}
          name="old_password"
          render={({ message }) => (
            <div className="flex flex-col gap-y-6 sm:gap-x-8" key={type}>
              <small className="text-red-500">{message}</small>
            </div>
          )}
        />
      </div>
    </div>
  </div>

您的输入必须是这样的：

<input
  {...register("old_password", { required: "Old password is required" })}
  id="old_password"
  type="password"
  className="your classes"
  onChange={(event) => setOldPassword(event.target.value)}
/>

当状态通过时，反应钩子形式显示错误块

React hook form show errrors block when state is passed

reactjs

forms

next.js

react-hook-form