Question

我正在尝试将打字稿与React Native，Graphql和Formik一起使用。

我在EmailSignupScreen（export default graphql(SIGNUP_MUTATION)(EmailSignupScreen);下出现一条红色的波浪线，并显示以下错误消息

Argument of type 'typeof EmailSignupScreen' is not assignable to parameter of type 'ComponentType<Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>>'.
  Type 'typeof EmailSignupScreen' is not assignable to type 'ComponentClass<Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>, any>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>' is not assignable to type 'Readonly<FormikSharedConfig & FormikState<FormValues> & FormikActions<FormValues> & FormikHandlers & FormikComputedProps<FormValues> & FormikRegistration & MutateProps<{}, OperationVariables> & Props>'.
        Property 'values' is missing in type 'Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>'.

我怀疑错误在于此行代码...

class EmailSignupScreen extends Component<
  ChildMutateProps<FormikProps<FormValues>> & Props
>

我应该如何正确输入打字稿来消除错误

谢谢

import React, { Component } from "react";
import { View, Text, StyleSheet, Alert, TouchableOpacity } from "react-native";
import { Button } from "react-native-elements";
import { Formik, FormikProps } from "formik";
import { NavigationScreenProp } from "react-navigation";
import * as Yup from "yup";

import Input from "../components/Input";
import SIGNUP_MUTATION from "../graphql/mutations/signup";
import { graphql, ChildMutateProps } from "react-apollo";

interface Props {
  navigation: NavigationScreenProp<any, any>;
}

interface FormValues {
  email: string;
  password: string;
  confirmPassword: string;
}

const api = (user: any) =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      if (user.email === "hello@gmail.com") {
        reject({ email: "Email already use" });
      } else {
        resolve();
      }
    }, 2000);
  });

class EmailSignupScreen extends Component<
  ChildMutateProps<FormikProps<FormValues>> & Props
> {
  static navigationOptions = () => ({
    title: "SIGN UP"
  });

  _handleSubmit = async (values: any, bag: any) => {
    try {
      await api(values);
      Alert.alert("Successful!");
    } catch (error) {
      bag.setSubmitting(false);
      bag.setErrors(error);
    }
  };
  render() {
    const { container, buttonStyle, linkStyle } = styles;
    return (
      <View style={container}>
        <Formik
          initialValues={{ email: "", password: "", confirmPassword: "" }}
          onSubmit={this._handleSubmit}
          validationSchema={Yup.object().shape({
            email: Yup.string()
              .email("Not valid email")
              .required("Email is required"),
            password: Yup.string()
              .min(6)
              .required("Password is required"),
            confirmPassword: Yup.string()
              .oneOf(
                [Yup.ref("password", undefined)],
                "Confirm Password must matched Password"
              )
              .required("Confirm Password is required")
          })}
          render={({
            values,
            handleSubmit,
            errors,
            touched,
            setFieldValue,
            setFieldTouched,
            isValid,
            isSubmitting
          }: any) => (
            <React.Fragment>
              <Input
                label="Email"
                autoCapitalize="none"
                autoComplete="none"
                value={values.email}
                onChange={setFieldValue}
                onTouch={setFieldTouched}
                name="email"
                error={touched.email && errors.email}
              />
              <Input
                label="Password"
                autoComplete={false}
                autoCapitalize="none"
                secureTextEntry
                name="password"
                value={values.password}
                onChange={setFieldValue}
                onTouch={setFieldTouched}
                error={touched.password && errors.password}
              />
              <Input
                label="Confirm Password"
                autoComplete={false}
                autoCapitalize="none"
                secureTextEntry
                name="confirmPassword"
                value={values.confirmPassword}
                onChange={setFieldValue}
                onTouch={setFieldTouched}
                error={touched.confirmPassword && errors.confirmPassword}
              />
              <Button
                backgroundColor="purple"
                buttonStyle={buttonStyle}
                title="Submit"
                onPress={handleSubmit}
                disabled={!isValid || isSubmitting}
                loading={isSubmitting}
              />
              <TouchableOpacity
                style={linkStyle}
                onPress={() => this.props.navigation.navigate("Signin")}
              >
                <Text>Go to Sign in</Text>
              </TouchableOpacity>
            </React.Fragment>
          )}
        />
      </View>
    );
  }
}

export default graphql(SIGNUP_MUTATION)(EmailSignupScreen);

Answer 1

解决方案是在导出的graphql()中添加一个Props标签。像这样：

export default graphql<Props>(SIGNUP_MUTATION)(EmailSignupScreen);

一屏显示带有React Native，Graphql和Formik的打字稿

1 个答案: