Тип '{refetch: any;} 'отсутствует при использовании Formik и React - PullRequest
Новая
       6

Тип '{refetch: any;} 'отсутствует при использовании Formik и React

0 голосов
/ 07 февраля 2019

Я получаю следующую ошибку, когда пытаюсь передать реквизит на мой EmailSignupScreen.Я пытаюсь создать Formik с помощью Typescript

"message": "Тип" {refetch: any;} 'отсутствует следующие свойства из типа' Readonly

У меня естьуже добавлен в refetch в качестве FormProps в моем EmailSignupScreen.tsx, и я также должен набрать его как любой. Следовательно, мой EmailSignupScreen должен ожидать реквизит для обновления, который я передал из моего файла Routes.tsx

Routes.tsx

<Route
  path="/signup"
  render={() => <EmailSignupScreen refetch={refetch} />}
/>

EmailSignupScreen.tsx 

import * as React from "react";
import { withRouter, RouteComponentProps } from "react-router";
// import { Mutation } from "react-apollo";
import {
  Formik,
  FormikProps,
  FormikActions,
  Form,
  Field,
  FieldProps,
  InjectedFormikProps
} from "formik";
// import { ADD_COMMENT } from "src/graphql/mutations";

interface MyFormValues {
  email: string;
  password: string;
}

interface FormProps extends RouteComponentProps<any> {
  refetch: any;
}

export const EmailSignup: React.SFC<
  InjectedFormikProps<FormProps, MyFormValues>
> = ({ refetch }) => {
  return (
    <div>
      <h1>Formik Form</h1>
      <Formik
        initialValues={{ email: "", password: "" }}
        onSubmit={(
          values: MyFormValues,
          actions: FormikActions<MyFormValues>
        ) => {
          console.log({ values, actions });
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }}
        render={(formikBag: FormikProps<MyFormValues>) => (
          <Form>
            <Field
              name="email"
              render={({ field, form }: FieldProps<MyFormValues>) => (
                <div>
                  <input type="text" {...field} placeholder="Email" />
                  {form.touched.email && form.errors.email && form.errors.email}
                </div>
              )}
            />
          </Form>
        )}
      />
    </div>
  );
};

const EmailSignupScreen = withRouter(EmailSignup);

export { EmailSignupScreen };

1 Ответ

0 голосов
/ 07 февраля 2019

Я решил проблему, добавив «any &» перед «FormikProps & FormProps».не уверен, что это правильный путь.не стесняйтесь предлагать, если есть лучший способ.спасибо

кстати, кто-нибудь знает, что вы добавляете 'any &' до того, как FormikProps <... работает? </p> 

export const EmailSignup: React.SFC<
  any & FormikProps<FormValues> & FormProps
> = props => { return ( ...
...