Estoy tratando de enviar una función de inicio de sesión desde un componente. Pero este error al enviar
Advertencia: se detectó un error no controlado de submitForm () Error: llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:
- Es posible que tenga versiones que no coincidan de React y el renderizador (como React DOM)
Aquí están las versiones
"react-dom": "^17.0.2", "react": "^17.0.2",
- Podrías estar rompiendo las Reglas de los Hooks
- Es posible que tenga más de una copia de React en la misma aplicación
Estoy usando una sola aplicación.
He estado usando este enfoque en otros proyectos de manera similar, pero esta vez no funciona. Por favor, ayúdenme a eliminar este problema. Ese es el código relacionado.
export default function LoginForm() { const dispatch = useDispatch; const navigate = useNavigate(); const userLogin = useSelector((state) => state.userLogin); const { error: loginError, loading: loginLoading, userInfo } = userLogin; const [showPassword, setShowPassword] = useState(false); const LoginSchema = Yup.object().shape({ email: Yup.string().email('Email must be a valid email address').required('Email is required'), password: Yup.string().required('Password is required'), }); const formik = useFormik({ initialValues: { email: '', password: '', }, validationSchema: LoginSchema, onSubmit: () => { dispatch(login(values.email, values.password)); }, }); const { errors, touched, values, isSubmitting, handleSubmit, getFieldProps } = formik; const handleShowPassword = () => { setShowPassword((show) => !show); }; useEffect(() => { if (userInfo) { navigate('/dashboard', { replace: true }); } }, [navigate, userInfo]);Está asignando la función useDispatch para dispatch const
const dispatch = useDispatch;en lugar de llamar al gancho para obtener la función de envío real
const dispatch = useDispatch();Es por eso que recibe el error más tarde al llamar al despacho.
Podrías probar useRef
const navigate = useRef(useNavigate()); ...... useEffect(() => { if (userInfo) { navigate('/dashboard', { replace: true }); } }, [navigate, userInfo]);