挂钩的调用在功能组件内部给出错误挂钩只能在 function 组件的主体内部调用

Question

I have component language for translations

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

in form I have validation using formik

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

here is form component

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="First Name *"
                defaultValue={formik.values.firstName}
                onChange={formik.handleChange}
                error={formik.touched.firstName && Boolean(formik.errors.firstName)}
                helperText={formik.touched.firstName && formik.errors.firstName}
                fullWidth
            />
        </form>
    );
};
export default UserForm;

in validation schema line with Language give an error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Call of Language is from validationSchema that is a functional component call stack of error is in line of useSelector from Language call of validationSchema is inside of 'useFormik' can be this the issue? any ideas?

Answer 1

It's because validationSchema is not a React component. You can only use hooks inside of a functional component and since validationSchema returns something other than JSX or another component it is not classed as a React component.

You will probably want to move your hook call up inside UserForm and then pass the result into validationSchema as an argument.