类型“{}”不可分配给类型 'IProps'

Question

我在我的项目中使用 react with formik 和 typescript。我在我的表单中使用 withFormik HOC，代码如下

import React from "react";

//Libraries import........
import {
  Container,
  Box,
  Link,
  Grid,
  Checkbox,
  FormControlLabel,
  TextField,
  CssBaseline,
  Avatar,
  Typography,
  makeStyles,
  Theme,
} from "@material-ui/core";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import { Form, FormikProps, FormikValues, useFormik, withFormik } from "formik";
import * as Yup from "yup";
//Components import........
import { Button } from "@components/button";

//Interfaces ..........
interface FormValues {
email?:string,
password?:string
}

interface IProps extends FormikProps<FormValues> {
  // onSubmit(e:React.FormEvent<HTMLInputElement>):void
}

const useStyles = makeStyles((theme: Theme) => ({
  paper: {
    marginTop: theme.spacing(8),
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: "100%", // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

const Login: React.FC<IProps> = (props) => {
  const classes = useStyles();
  const { handleSubmit, handleBlur, handleChange, handleReset, errors } = props;
  console.log(errors);
  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <form className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="Email Address"
            name="email"
            autoFocus
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
          />
          <FormControlLabel
            control={<Checkbox value="remember" color="primary" />}
            label="Remember me"
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign In
          </Button>
          <Grid container>
            <Grid item xs>
              <Link href="#" variant="body2">
                Forgot password?
              </Link>
            </Grid>
            <Grid item>
              <Link href="#" variant="body2">
                {"Don't have an account? Sign Up"}
              </Link>
            </Grid>
          </Grid>
        </form>
      </div>
      <Box mt={8}></Box>
    </Container>
  );
};

export const LoginView = withFormik<IProps, FormValues>({
  enableReinitialize: true,
  mapPropsToValues: (props) => {
    console.log(props);
    return { email: "", password: "" };
  },
  validationSchema: Yup.object({
    // email: Yup.string().required(),
  }),
  handleSubmit: (values) => {
    console.log(values);
  },
})(Login);

然后在我的项目中，我在我的页面中导入并使用 LoginView，例如

import React from "react";

import { LoginView } from "@components/user/login";

const Home: React.FC = (props: any) => {
  return (
    <div
      style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}
    >
      <LoginView />
    </div>
  );
};

export default Home;

我在写

时遇到错误

Type '{}' is not assignable to type 'IProps'. Type '{}' is missing the following properties from type 'FormikState': values, errors, touched, isSubmitting, and 2 more.

Answer 1

提供给 withFormik 的第一个通用类型不应从 FormikValues 扩展。

像这样定义 IProps

    interface IProps {
      // onSubmit(e:React.FormEvent<HTMLInputElement>):void
    }

看到这个https://codesandbox.io/s/Whosebug-69143042-wlvz9

类型“{}”不可分配给类型 'IProps'

Type '{}' is not assignable to type 'IProps'

typescript

reactjs

formik

react-typescript