Машинопись |В Typescript отсутствует 27 Props, при расширении formikProps на IProps - PullRequest
Новая
       32

Машинопись |В Typescript отсутствует 27 Props, при расширении formikProps на IProps

0 голосов
/ 15 апреля 2019

Я использую Formik с TypeScript, и я хочу использовать очень простой компонент формы в TS, внутри другого компонента, из которого я беру defaultValues и validationSchemas.

Сложность состоит в том, как получить доступ только к требуемому formikProps и не получить следующую ошибку: 

Type '{}' is missing the following properties from type 'Readonly<IProps>': values, errors, touched, isValidating, and 25 more.ts(2740)
(alias) class PasswordFields
import PasswordFields

Вот код для компонента: 

interface IProps extends FormikProps<IValues> {
  username?: string;
  email?: string;
}

interface IValues {
  username?: string;
  email?: string;
}

И в главном компоненте я называю это так: 

render(): ReactNode {
    const { mode } = this.props;
    return (
      <Formik
        initialValues={this.getInitialValues()}
        validationSchema={this.getValidationSchemas()}
        onSubmit={this.handleSubmit}
        validateOnBlur={false}
        render={({ isSubmitting, status }) =>
          (
            <Form>
              {mode === ActionMode.EDIT_INFO && (
                <Fragment>
                  <InfoFields /> // I am getting the error here..
                  <GroupSelectField />
                </Fragment>
              )}
              <Button
                className="btn btn-primary w-100 mt-5"
                disabled={isSubmitting}
                loading={isSubmitting}
                type="submit"
              >
                {mode === ActionMode.EDIT_INFO && <span>UPDATE INFO</span>}
              </Button>
            </Form>
          ) as ReactNode
        }
      />
    );
  }

Я вроде как стэк на этом. Не могли бы вы сказать мне, как получить доступ только к formikProps, который я хочу, так что TS не жалуется. ?? И у меня тоже есть другая проблема. Как передать реквизит из компонента в формы formik.

1 Ответ

1 голос
/ 17 апреля 2019

Как и в случае вашего другого вопроса , который имеет ту же проблему, InfoFields ожидает, что вы не передаете реквизиты: 

<Formik
    render={formikProps => (
        <Form>
            // Other Code.

            <InfoFields {...formikProps} />

            // Other Code.
        </Form>
    )}
/>

Не могли бы вы сказать мне, как получить доступ только к formikProps, который я хочу, чтобы TS не жаловался

Вместо вышеупомянутого вы можете выбрать реквизиты, которые вам действительно нужны, из FormikProps и передать их в InfoFields. Например что-то вроде этого: 

const InfoFields = ({ errors, touched }: Pick<FormikProps<IValues>, 'errors' | 'touched'>) => (
    <div>
        // Whatever.
    </div>
);

... и отображается в родительском компоненте следующим образом: 

<Formik
    render={({ errors, touched }) => (
        <Form>
            // Other Code.

            <InfoFields errors={errors} touched={touched} />

            // Other Code.
        </Form>
    )}
/>
...