javascript - React Hook 不断抛出错误缺少依赖项

Question

React Hook useEffect 缺少依赖项：'callback' 和 'isSubmit'。尝试验证注册表单，但我收到此错误仍然是 React 的菜鸟，请帮助

import { useState, useEffect } from "react";

const useForm = (callback, validate) => {
    const [values, setValues] = useState({
        firstName: '',
        lastName: '',
        email: '',
        password: '',
        confirmPassword: ''
    });

    // Handle Errors
    const [errors, setErrors] = useState({})
    const [isSubmit, setIsSubmit] = useState(false)


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

    // Prevent Form from submitting
    const handleSubmit = e => {
        e.preventDefault();

        setErrors(validate(values));
        setIsSubmit(true);
    };

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

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

export default useForm;

我正在处理简单的注册表单，我无法理解为什么这个反应会抛出这个特定的错误消息。任何帮助将不胜感激

标签： javascriptreactjscallback

Answer 1

您可以将这个警告作为emartini 上面的答案，但我想知道为什么您需要useEffect。我们可以不使用 useEffect 来达到同样的效果吗？像这样的东西：

import { useState, useEffect } from "react";

const useForm = (callback, validate) => {
    const [values, setValues] = useState({
        firstName: '',
        lastName: '',
        email: '',
        password: '',
        confirmPassword: ''
    });

    // Handle Errors
    const [errors, setErrors] = useState({})

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

    // Prevent Form from submitting
    const handleSubmit = e => {
        e.preventDefault();

        const validateErrors= validate(values);
        if (Object.keys(validateErrors).length === 0) {
          callback();
        }
        setErrors(validateErrors);

    };

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

export default useForm;