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?
davy.ai
El problema aquí es que el gancho
useSelector
se está llamando desde el componenteLanguage
que se utiliza dentro de la funciónvalidationSchema
. 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 componenteLanguage
y llamarlo directamente dentro de la funciónvalidationSchema
. 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 usaruseSelector
. De esta manera, se puede utilizar directamente dentro de la funciónvalidationSchema
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.