Question

当我尝试将道具传递到我的EmailSignupScreen时，出现以下错误。我正在尝试使用Typescript的Formik

“消息”：“类型'{refetch：any;}'缺少类型'只读'

中的以下属性

我已经在我的EmailSignupScreen.tsx中将refetch作为FormProps添加了，并且还键入了任意形式。因此，我的EmailSignupScreen应该期待我从Routes.tsx文件中传下来的refetch道具

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 };

Answer 1

我通过在“ FormikProps和FormProps”之前添加“ any＆”解决了该问题。不知道这是否是正确的方法。随时建议是否有更好的方法。谢谢

顺便说一句，有人知道在FormikProps <...起作用之前添加'any＆'吗？

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

输入'{refetch：any; }'使用Formik和React

1 个答案: