formik connect props 扩展了缺失的属性

Question

寻找一种方法来避免在使用 connect().

时在我的 Props 中写下 formik 的所有 25++ 个属性

错误就是这样：Type '{ entry: Entry; }' is missing the following properties from type 'Props': values, errors, touched, isValidating, and 25 more.

我想使用整个 formik 对象或其中的 values，所以像这样：

const MyComponent = ({ entry, values }: Props) => { //...

或类似的：

const MyComponent = ({ entry, formik }: Props) => { //...

像这样导出时：export default connect(MyComponent);（还没有输入，顺便说一句，这也需要一些帮助）

我正在为以下类型而苦苦挣扎：

import * as React from 'react';
import {
  connect,
  FormikProps,
  FormikValues
  ...
} from 'formik';
...

interface Props extends Pick<FormikProps<FormikValues>, 'values'> {
  entry: Entry;
  values: Pick<FormikProps<FormikValues>, 'values'>;
  // values: FormikValues; //tryouts
}

甚至

interface Props extends FormikProps<FormikValues> {
  entry: Entry;
  // values: FormikValues;
}

或

const MyComponent = ({ entry, values }: Props & FormikProps<FormikValues>) => {

我不想让 formik 道具可选（所以 ? 部分）。但是如果我不使用 ? 我会得到错误 Property 'values' (or formik) is missing in type '{ entry: Entry; }' but required in type 'Props'. .但我不明白，因为所有这些道具都是通过 connect() 而不是从父组件传递的。

我认为 extends SomeProps 关键字可以让您完全避免键入 SomeProps 中的属性。因此，我不必在我的 Props 界面中包含 formik 或 values 或任何这些道具。

我做错了什么？在这种情况下应该如何声明类型？

Answer 1

请注意，connect 不再是 Formik 的一部分，请改用 useFormik。

你可以这样定义。

  interface Props = {
     entry: Entry;
  }

  const MyComponent = ({ entry, values}): Props & FormikProps<FormikValues> => {

  const ConnectedComponent = connect<Props, any>(MyComponent)

现在您可以轻松使用 <ConnectedComponent /> 而不会出现任何类型错误

formik connect props 扩展了缺失的属性

formik connect props extends missing properties

reactjs

typescript

types

extends

formik