Ошибка: введите '{children: Element [];} 'не имеет общих свойств с типом' IntrinsicAttributes & RefAttributes <HTMLFormElement>' - PullRequest
Новая
       0

Ошибка: введите '{children: Element [];} 'не имеет общих свойств с типом' IntrinsicAttributes & RefAttributes <HTMLFormElement>'

2 голосов
/ 26 октября 2019

Я пытаюсь использовать Formik в своем приложении реакции. У меня есть компонент входа, написанный на TS. По какой-то причине элемент Form внутри Formik выдает следующую ошибку:

Ошибка TS2559 (TS) Тип '{children: Element [];} 'не имеет общих свойств с типом IntrinsicAttributes & RefAttributes.

Интересно, как я могу решить эту проблему. Какие-нибудь решения? 

 <div>
            <Form></Form> // NO ERROR
            <h4>Login</h4>
            <Formik
                initialValues={{
                    username: '',
                    password: ''
                }}
                validationSchema={Yup.object().shape({
                    username: Yup.string().required('Username is required'),
                    password: Yup.string().required('Password is required')
                })}
                onSubmit={({ username, password }, { setStatus, setSubmitting }) => {
                    setStatus();
                    authenticationService.login(username, password)
                        .then(
                            result => {
                                console.log(result);
                                console.log(typeof result);

                                if (result.status == '500') {
                                    setSubmitting(false);
                                    setStatus("Login failed.");

                                } else if (result.status == '200') {
                                    if (result.data["roles"].result.includes('Admin'))
                                        history.push('/admin/courses');

                                    history.push('/courses');
                                }
                            },
                            error => {
                                setSubmitting(false);
                                setStatus(error);
                            }
                        );
                }}
                render={({ errors, status, touched, isSubmitting }) => (
                    <Form> // ERROR!!!
                        <div className="form-group">
                            <label htmlFor="username">Username</label>
                            <Field name="username" type="text" className={'form-control' + (errors.username && touched.username ? ' is-invalid' : '')} />
                            <ErrorMessage name="username" component="div" className="invalid-feedback" />
                        </div>
                        <div className="form-group">
                            <label htmlFor="password">Password</label>
                            <Field name="password" type="password" className={'form-control' + (errors.password && touched.password ? ' is-invalid' : '')} />
                            <ErrorMessage name="password" component="div" className="invalid-feedback" />
                        </div>
                        <div className="form-group">
                            <button type="submit" className="btn btn-primary" disabled={isSubmitting}>Login</button>
                            {isSubmitting && <LoadingSpinner />}
                        </div>
                        {
                            status &&
                            <div className={'alert alert-danger'}>Login failed.</div>
                        }
                    </Form>
                )}
            />

            />

        </div>

1 Ответ

2 голосов
/ 26 октября 2019

Похоже, что это проблема с formik v2 (выпущена 21 час назад), у меня та же проблема с чистой установкой Formik CRA, и она, похоже, не учитывает типы, позволяющие <Form /> иметь детей.

Я бы порекомендовал понизить версию v1.5.8 на данный момент, я могу подтвердить, что это исправит вашу проблему.

При использовании formik я бы также рекомендовал передавать типы значений, это обеспечивает большую безопасность типовочень легко. Вы можете добавить type Values = { username: string, password: string } в начало файла и передать его в компонент Formik, например <Formik<Values>

...