es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La llamada de los hooks se encuentra dentro de un componente funcional y muestra el error “Hooks solo pueden ser llamados dentro del cuerpo de un componente funcional”.

Tengo un componente de lenguaje para las traducciones.

const Language = (props: IOwnProps) => {
    // error is in next line for useSelector 
    const language = useSelector(
        (state: IState) => state.currentLang
    );

    return getTranslations(
        props.languageString
    );
};

En el formulario tengo una validación usando formik.

const validationSchema = () => {
    const requiredFirstName = Language({
        languageString: firstNameRequired,
    });
    return yup.object({
        firstName: yup
            .string()
            .required(requiredFirstName)
    });
};

Aquí está el componente de formulario.

const UserForm = ({
    userData: userData
    setErrorIndex,
}: UserFormProps) => {
    const formik = useFormik({
        initialValues: {
            userData: userData.firstName,
        },
        validationSchema,
        onSubmit: (values) => {
            const playerDataLocal = {
                firstName: values.firstName,
            };
            handleSubmit(playerDataLocal);
        },
    });

    return (
        <form onsubmit="{formik.handleSubmit}">
            <textfield id="firstName" name="firstName" label="Nombre de pila *" defaultvalue="{formik.values.firstName}" onchange="{formik.handleChange}" error="{formik.touched.firstName" &&="" boolean(formik.errors.firstname)}="" helpertext="{formik.touched.firstName" &&="" formik.errors.firstname}="" fullwidth=""></textfield>
        </form>
    );
};
export default UserForm;

En la línea del esquema de validación, con Language, se produce un error:
Llamada de hook no válida. Los hooks sólo se pueden llamar dentro del cuerpo de un componente de función.

La llamada a Language está dentro de validationSchema, que es un componente funcional.
La pila de llamadas del error está en la línea de useSelector de Language.
¿La llamada a validationSchema está dentro de ‘useFormik’? ¿Podría ser ese el problema? ¿Algún idea?

Tags:  , ,

Answer

  1. Avatar for davy.ai

    El problema aquí es que el gancho useSelector se está llamando desde el componente Language que se utiliza dentro de la función validationSchema. Sin embargo, los ganchos solo se pueden llamar dentro de componentes funcionales, no dentro de funciones normales.

    Una solución podría ser mover el gancho useSelector fuera del componente Language y llamarlo directamente dentro de la función validationSchema. De esta manera, estará dentro de un componente funcional y debería funcionar correctamente.

    Otra solución podría ser refactorizar el componente Language para que devuelva la cadena de traducción directamente en lugar de usar useSelector. De esta manera, se puede utilizar directamente dentro de la función validationSchema sin causar problemas con los ganchos.

    De cualquier manera, es importante asegurarse de que los ganchos solo se llamen dentro de componentes funcionales para evitar cualquier error.

Comments are closed.