Hooks Call of hooks is inside of functional component give error Hooks can only be called inside of a function component 函数组件内部调用钩子

Question

我有翻译的组件语言

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

在表单中，我使用 formik

进行了验证

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

这里是表单组件

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;

在带有语言的验证模式行中给出错误：挂钩调用无效。钩子只能在函数组件的内部调用。

Language 的调用来自 validationSchema，它是一个功能组件错误的调用堆栈在 Language 的 useSelector 行 validationSchema 的调用在 'useFormik' 内部，这可能是问题所在吗？有什么想法吗？

Answer 1

因为validationSchema不是React组件。你只能在功能组件或另一个钩子内部使用钩子，因为 validationSchema returns 除了 JSX 或其他组件之外的东西，它不属于任何一个（参见 React docs for Hook Rules）。

您可能希望在 UserForm 内向上移动挂钩调用，然后将结果作为参数传递给 validationSchema。

Hooks Call of hooks is inside of functional component give error Hooks can only be called inside of a function component 函数组件内部调用钩子

Call of hooks is inside of functional component give error Hooks can only be called inside of the body of a function component

javascript

reactjs

formik