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;

我正在處理簡單的注冊表單，我無法理解為什么這種反應會拋出這個特定的錯誤消息。 任何幫助將不勝感激

Answer 1

只需將這些變量作為依賴項添加到鈎子中的最后一個useEffect 。

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

Answer 2

您可以將這個警告作為 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;