類型錯誤：驗證不是 react.js 中的 function

Question

我正在嘗試驗證我的表單，但總是出現相同的錯誤，這是表單的代碼：

import React from "react";
import zxcvbn from "zxcvbn";
import logo from "../images/milinus.png";
import useForm from "./useForm";

function Signup() {
  //function for validation of the submited data from the form
  const validation = (values) => {
    let errors = {};

    //name validion
    if (!values.name.trim()) {
      errors.name = "Name is required";
    }

    //last name validtion
    if (!values.lastname.trim()) {
      errors.lastname = "Username is required";
    }

    //email validtion
    if (!values.email.trim()) {
      errors.email = "Email is required";
    } else if (!/\S+@\S+\.\S+/.test(values.email)) {
      errors.email = "Email is invalid";
    }

    //password validtion
    if (!values.pass.trim()) {
      errors.pass = "pass is required";
    } else if (values.pass < 8) {
      errors.pass = "PassWord need to be 8 characters or more";
    }

    //pass_conf
    if (!values.pass_conf.trim()) {
      errors.pass_conf = "pass_conf is required";
    } else if (values.pass_conf == !values.pass) {
      errors.pass_conf = "pass_conf is not match the Password";
    }

    return errors;
  }

  //custom hook for the form
  const { hadleChange, values, handleSubmit, errors } = useForm(validation);

  //function that conforme and indicaite the score of the pass word
  const confirm_ps = (e) => {
    const weak = document.querySelector(".weak");
    const muduim = document.querySelector(".muduim");
    const strong = document.querySelector(".strong");
    const indicater = document.querySelector(".indicater");
    let test = zxcvbn(e.target.value);

    weak.setAttribute("style", "background-color:white");
    muduim.setAttribute("style", "background-color:white");
    strong.setAttribute("style", "background-color:white");
    indicater.innerHTML = "";

    console.log(test.score);

    if (test.score === 0 || test.score === 1) {
      if (e.target.value == !null) {
        weak.setAttribute("style", "background-color:white");
        muduim.setAttribute("style", "background-color:white");
        strong.setAttribute("style", "background-color:white");
        indicater.innerHTML = "";
      }
      console.log(e.target.value);
      weak.setAttribute("style", "background-color:red");
      indicater.innerHTML = "Weak";
    } else if (test.score === 2 || test.score === 3) {
      weak.setAttribute("style", "background-color:yellow");
      muduim.setAttribute("style", "background-color:yellow");
      indicater.innerHTML = "Meduim";
    } else if (test.score === 4) {
      weak.setAttribute("style", "background-color:green");
      muduim.setAttribute("style", "background-color:green");
      strong.setAttribute("style", "background-color:green");
      indicater.innerHTML = "Strong";
    }
  };

  return (
    <div className="signup">
      <div className="logo">
        <img src={logo} alt="logo" />
        <p>CREER UN COMPTE</p>
      </div>
      <div className="inputs">
        <form className="form" onSubmit={handleSubmit}>
          <div className="form-input">
            <input
              type="text"
              name="name"
              id="name"
              placeholder="Nom"
              value={values.name}
              onChange={hadleChange}
            />
            <p className="errorname">{errors.name}</p>
          </div>

          <div className="form-input ">
            <input
              type="text"
              name="lastname"
              id="lastname"
              placeholder="Prenom"
              value={values.lastname}
              onChange={hadleChange}
            />
            <p className="errorlastname"></p>
          </div>

          <div className="form-input">
            <input
              type="text"
              id="username"
              name="username"
              placeholder="Username"
              value={values.username}
              onChange={hadleChange}
            />
            <p className="errorusername"></p>
          </div>

          <div className="form-input">
            <input
              type="text"
              id="email"
              name="email"
              placeholder="Email"
              value={values.email}
              onChange={hadleChange}
            />
            <p className="erroremail"></p>
          </div>

          <div className="form-input">
            <input
              type="password"
              id="pass"
              name="pass"
              placeholder="Mote de pass"
              onChange={confirm_ps}
            />
            <p className="errorpassword"></p>
          </div>

          <div className="form-input">
            <input
              type="password"
              id="pass_conf"
              className="conform"
              name="pass_conf"
              placeholder="conform le mote de pass"
              value={values.pass_conf}
              onChange={hadleChange}
            />
            <p className="errorpass_conf"></p>
          </div>

          <div className="progress">
            <span className="weak"></span>
            <span className="muduim"></span>
            <span className="strong"></span>
          </div>
          <div className="indicater"></div>
          <div className="wornings">
            <ul>
              <li>Letters majuscule et minuscule</li>
              <li>Plus de 8 characters</li>
              <li>Contiens au moin un chiffers ou symbol</li>
            </ul>
          </div>
          <button type="submite" className="signup-btn">
            S'INSCRIRE AND ACCEPTER
          </button>
        </form>
      </div>
    </div>
  );
}

export default Signup;

這是自定義掛鈎的代碼：

import { useState, useEffect } from "react";

const useForm = (callback,validation) => {
  const { values, setValues } = useState({
    name: "",
    lastname: "",
    username: "",
    email: "",
    pass: "",
    pass_conf: "",
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setErrors(validation(values));
    setIsSubmitting(true);
  };

  useEffect(() => {
    if (Object.keys(errors).length === 0 && isSubmitting) {
      callback();
    }
  }, [errors]);

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

export default useForm;

當我點擊提交按鈕時，出現以下錯誤：TypeError: validation is not a function

22 | 23 | const handleSubmit = (e) => { 24 | e.preventDefault();

25 | 設置錯誤（驗證（值））； | ^ 26 | setIsSubmitting（真）； 27 | };

Answer 1

您正在為掛鈎設置兩個參數 - 回調 function 和驗證 function，並且您僅通過驗證 function

useForm(validation)

請先傳遞回調 function，然后傳遞驗證 function

Answer 2

您的useForm收到兩個參數，您只在回調中給它一個參數

const useForm = (callback,validation) 

結果這里報錯：

setErrors(validation(values));

Answer 3

因為您只傳遞callback ，而不傳遞驗證。 您需要 decalre callBack並將其傳遞給useForm

const callBack = () => {...};
useForm(callBack, validation);

Answer 4

我覺得你的邏輯有點不清楚。

const { hadleChange, values, handleSubmit, errors } = useForm(validation);

不管怎樣，你在這里通過了validation作為callback 。

如何改變它如下。

const useForm = (validation, callback) => {

要使用回調，您可以在此處定義回調。

 const { hadleChange, values, handleSubmit, errors } = useForm(validation, function() {... callback here});