React+TS使用withFormik时报FC<IProps>类型不匹配错误如何解决？

错误根因 #

这个类型报错是withFormik的泛型参数缺失导致的，TypeScript无法自动推导出符合预期的组件入参类型，因此出现类型不匹配的提示，代码可正常运行是因为类型错误不会阻断JavaScript实际执行。

解决方案1：保留withFormik写法 #

1. 先补全FormValues接口定义，你当前的定义只包含email字段，但mapPropsToValues返回的对象包含password字段，属于类型不匹配的隐患：

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

2. 给withFormik显式传入两个泛型参数，第一个参数是Login组件接收的外部props类型（无额外外部props则传入空对象类型{}），第二个参数是表单值类型FormValues：

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

修改后类型报错即可消失。

解决方案2：适配Hooks的更优写法（推荐） #

你使用的是React函数组件，完全可以直接用Formik提供的useFormik钩子实现相同功能，从根源上避免高阶组件带来的类型问题：

import React from "react";
import { Form, Input, Button } from "antd";
import { useFormik } from "formik";
import * as Yup from "yup";
import styles from "./login.module.scss";

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

const Login: React.FC = () => {
  const formik = useFormik<FormValues>({
    initialValues: { email: "", password: "" },
    validationSchema: Yup.object({
      email: Yup.string().required("邮箱不能为空"),
      password: Yup.string().required("密码不能为空")
    }),
    onSubmit: (values) => {
      console.log(values);
    }
  });

  return (
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      onSubmitCapture={formik.handleSubmit}
      autoComplete="off"
    >
      <Form.Item label="Username" name="email">
        <Input 
          value={formik.values.email}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
        />
      </Form.Item>

      <Form.Item label="Password" name="password">
        <Input.Password 
          value={formik.values.password}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
        />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Login;

内容的提问来源于stack exchange，提问作者RRR uzumaki