मेरे पास अनुवाद के लिए घटक भाषा है

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

फॉर्म में मेरे पास फॉर्मिक का उपयोग करके सत्यापन है

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' के अंदर है, क्या यह समस्या हो सकती है? कोई विचार?

0
Alex 6 जिंदा 2022, 12:05
2
आपको अपने हुक को उपसर्ग use के साथ नाम देना होगा, उदा। useLanguage और useValidationSchema
 – 
fast-reflexes
6 जिंदा 2022, 12:08
 – 
ksav
6 जिंदा 2022, 12:10
ऐसा लगता है कि eslint-plugin-react-hooks को लगता है कि आप हुक के नियम तोड़ रहे हैं क्योंकि validationSchema बड़े अक्षर या use उपसर्ग से शुरू नहीं होता है।
 – 
ksav
6 जिंदा 2022, 12:13
1
या उस useSelector को मूल घटक UserForm में कॉल करें और इसे प्रोप के रूप में अग्रेषित करें - और आपको use के साथ नाम बदलने की आवश्यकता नहीं है
 – 
Stefan Zivkovic
6 जिंदा 2022, 12:15
Language एक घटक की तरह नहीं दिखता है?
 – 
evolutionxbox
6 जिंदा 2022, 12:21

1 उत्तर

सबसे बढ़िया उत्तर

ऐसा इसलिए है क्योंकि validationSchema एक प्रतिक्रिया घटक नहीं है। आप केवल एक कार्यात्मक घटक के अंदर हुक का उपयोग कर सकते हैं और चूंकि validationSchema JSX या किसी अन्य घटक के अलावा कुछ और देता है, इसलिए इसे एक प्रतिक्रिया घटक के रूप में वर्गीकृत नहीं किया जाता है।

आप शायद अपने हुक कॉल को UserForm के अंदर ले जाना चाहेंगे और फिर परिणाम को validationSchema में तर्क के रूप में पास करेंगे।

2
Tom 6 जिंदा 2022, 12:49
आपके उत्तर के लिए thx, यह UserForm के अंदर काम करता है, लेकिन अब UserForm बहुत बड़ा घटक है :)
 – 
Alex
6 जिंदा 2022, 13:03
1
यह दुर्भाग्य से अपरिहार्य है कि बहुत सारे हुक वाले घटक बड़े हो जाते हैं और उन्हें विभाजित नहीं किया जा सकता है। मैं वर्तमान में एक घटक 1200 लाइन लंबी में काम कर रहा हूँ...
 – 
Tom
6 जिंदा 2022, 13:12