Reactjs 如何通过typescript在Formik中添加强类型字段？

我试图通过typescript在FormikReact库中添加强类型，但没有这样做。当然，我使用了这个链接，但我无法解决我的问题。

我从这部分代码（}）（ActivityForm）；）中得到了这个错误：

类型为“（props:IProps）=>Element”的参数不可分配给 “CompositeComponent”类型的参数 &FormikState、FormikHelpers、FormikHandler和FormikComputed道具& 表单注册&{…；}>'。类型“（props:IProps）=>元素”为 不可分配给“FunctionComponent&FormikState&FormikHelpers&FormikHandler”类型 &FormicComputedProps&FormicRegistration&{…；}>'。种类 参数“props”和“props”不兼容。财产 “FormikSharedConfig&FormikState”类型中缺少“setEditMode” &蚁族帮手、蚁族帮手和蚁族电脑道具& formicRegistration&{…；}&{…；}但在类型中是必需的 “IProps”.ts（2345）ActivityForm.tsx（7，3）：“setEditMode”已声明 在这里

---

常量ActivityForm:React.FunctionComponent类型的参数 “FunctionComponent”不可分配给类型为的参数 '组合组件& 甲酸甲酯和甲酸甲酯& FormikHandler和FormikComputed道具& 表单注册&{…；}>'。类型“FunctionComponent”为 不可分配给类型“FunctionComponent&FormikState”& 蚁族助手和蚁族帮手& FormicComputedProps&FormicRegistration&{…；}>'。 属性“propTypes”的类型不兼容。 类型“WeakValidationMap |未定义”不可分配给类型“WeakValidationMap”& 甲酸甲酯和甲酸甲酯& FormikHandler和FormikComputed道具& 表单注册&{…}>|未定义'。 类型“WeakValidationMap”不可分配给类型“WeakValidationMap”& 甲酸甲酯和甲酸甲酯& FormikHandler和FormikComputed道具& 表单注册&{…；}>'。 属性“setFormikState”的类型不兼容。 类型“验证程序FormikState）， cb？：（（）=>void）|未定义）=>void>|未定义”不可赋值 要键入“Validator FormikState”，cb？：（（）=> void）|未定义）=>void>|未定义'。 类型“验证程序FormikState）， cb？：（（）=>void）|未定义）=>void>'不可分配给类型 '验证程序FormikState），cb？：（（）=> void）|未定义）=>void>'。 类型“（f:FormikState |）（（prevState:FormikState）=>FormikState），cb:（（）=> void）|未定义）=>void'不可分配给类型'（f: FormikState |（（prevState:FormikState）=> FormikState），cb:（（）=>void）|未定义）=>void'。 参数“f”和“f”的类型不兼容。 类型“FormikState |”（（prevState:FormikState）=>FormikState）不可用 可分配给'FormikState |（（prevState: 甲酸酯）=>甲酸酯“。 类型“FormikState”不可分配给类型“FormikState”（（prevState: 甲酸酯）=>甲酸酯“。 类型“FormikState”不可分配给类型“FormikState”。ts（2345）Peek问题 没有可用的快速修复方法

---

此错误来自ActivityDashboard.tsx

键入“{setEditMode:（editMode:boolean）=>void；标题：字符串； 描述：字符串；类别：字符串；城市：字符串；地点：字符串； 日期：string；}类型中缺少以下属性 “IProps”：值、错误、触摸、isSubmitting和其他28个。ts（2740）

---

从“React”导入React；
从“yup”导入*作为yup；
从“formik”导入{withFormik，Form，Field，FormikProps}；
接口IProps{
setEditMode：（editMode:boolean）=>void；
}
导出常量活动形式=（道具：IProps）=>{
const{setEditMode}=props；
返回(
编辑
setEditMode（假）}>
取消
);
};
常量myForm=withFormik({
mapPropsToValues:props=>{
返回{}；
},
validationSchema:yup.object（）.shape({
标题：yup.string（）.required（）
}),
handleSubmit（值）{
console.log（值）；
}
})（活动形式）；
导出默认myForm；

---

从“React”导入React；
从“../../../app/models/activity”导入{IActivity}；
从“/ActivityList”导入{ActivityList}；
从“antd”导入{Col，Row}；
从“./details/ActivityDetails”导入{ActivityDetails}；
从“./form/ActivityForm”导入{ActivityForm}；
接口IProps{
活动：IActivity[]；
selectActivity：（id:string）=>void；
selectedActivity:IAActivity | null；
编辑模式：布尔；
setEditMode：（editMode:boolean）=>void；
setSelectedActivity：（activity:IAActivity | null）=>void；
}
导出常量ActivityDashboard:React.FC=({
活动，
选择活动，
选择活动，
编辑模式，
设置编辑模式，
设置选定活动
}) => {
返回(
{selectedActivity&&！editMode&&(
)}
{editMode&&(
)}
);
};

我认为这里有多个问题导致TypeScript编译器发出令人困惑的消息：

首先，确保您的功能组件扩展了

React.FC

类型，以便TypeScript知道这是一个React组件：

import * as React from 'react';

export const ActivityForm : React.FC<IProps> = (props) => {
...

最后的代码应该如下所示（确保将缺少的属性添加到

MyFormValues

界面）：

import*as React from'React'；
从'formik'导入{withFormik，Form，Field，FormikProps}；
从“是”以是的形式导入*；
接口MyFormValue{
标题：字符串；
类别：字符串；
描述：字符串；
...
}
接口IProps扩展了FormikProps{
setEditMode（arg:boolean）：void；
}
导出常量活动形式：React.FC=props=>{
const{setEditMode}=props；
返回(
编辑
setEditMode（假）}>
C
import React from "react";
import { IActivity } from "../../../app/models/activity";
import { ActivityList } from "./ActivityList";
import { Col, Row } from "antd";
import { ActivityDetails } from "../details/ActivityDetails";
import { ActivityForm } from "../form/ActivityForm";

interface IProps {
  activities: IActivity[];
  selectActivity: (id: string) => void;
  selectedActivity: IActivity | null;
  editMode: boolean;
  setEditMode: (editMode: boolean) => void;
  setSelectedActivity: (activity: IActivity | null) => void;
}

export const ActivityDashboard: React.FC<IProps> = ({
  activities,
  selectActivity,
  selectedActivity,
  editMode,
  setEditMode,
  setSelectedActivity
}) => {
  return (
    <Row>
      <Col span={3}></Col>
      <Col span={10}>
        <ActivityList activities={activities} selectActivity={selectActivity} />
      </Col>
      <Col span={1}></Col>
      <Col span={6}>
        {selectedActivity && !editMode && (
          <ActivityDetails
            activity={selectedActivity}
            setEditMode={setEditMode}
            setSelectedActivity={setSelectedActivity}
          />
        )}
        {editMode && (
          <ActivityForm
            setEditMode={setEditMode}
            title="alex"
            description="hi"
            category="human"
            city="newyork"
            venue="sd"
            date="2019"
          />
        )}
      </Col>
    </Row>
  );
};

import * as React from 'react';

export const ActivityForm : React.FC<IProps> = (props) => {
...

import { FormikProps } from 'formik';

interface MyFormValues {
  title: string;
  category: string;
  description: string;
}

interface IProps extends FormikProps<MyFormValues> {
  setEditMode(arg: boolean): void;
}

import * as React from 'react';
import { withFormik, Form, Field, FormikProps } from 'formik';
import * as Yup from 'yup';

interface MyFormValues {
  title: string;
  category: string;
  description: string;
  ...
}

interface IProps extends FormikProps<MyFormValues> {
  setEditMode(arg: boolean): void;
}

export const ActivityForm: React.FC<IProps> = props => {
  const { setEditMode } = props;
  return (
    <Form>
      <Field type="text" name="title" placeholder="Title" />
      <Field
        type="text"
        rows={2}
        name="description"
        placeholder="Description"
      />
      <Field type="text" name="category" placeholder="Category" />
      <Field type="date" name="date" placeholder="Date" />
      <Field type="text" name="city" placeholder="City" />
      <Field type="text" name="venue" placeholder="Venue" />
      <button type="submit">Edit</button>
      <button type="button" onClick={() => setEditMode(false)}>
        Cancel
      </button>
    </Form>
  );
};

const myForm = withFormik({
  mapPropsToValues: props => {
    return {};
  },
  validationSchema: Yup.object().shape({
    title: Yup.string().required()
  }),
  handleSubmit(values) {
    console.log(values);
  }
})(ActivityForm);

export default myForm;