类型 'FormikValues' 缺少类型 'Exact<{ 中的以下属性

Question

我有以下表格：


import { Field, Form, Formik, FormikProps, FormikValues } from 'formik'
import { NextPage } from 'next'
import React from 'react'
import { useCreateUserMutation } from '../generated/graphql'

const Register: NextPage = () => {
  const formikRef = useRef<FormikProps<FormikValues>>(null)

  React.useEffect(() => {
    nameInit = localStorage.getItem('name') ?? ''
    console.log(nameInit)
    if (formikRef.current) {
      formikRef.current.setFieldValue('name', nameInit)
    }
  }, [])
  const [register, { data, error, loading }] = useCreateUserMutation()
  return (
    <Formik
      innerRef={formikRef}
      initialValues={{
        name: nameInit,
      }}
      onSubmit={async (values) => {
            console.log(values)
            const response = await register({ variables: values })
            console.log(response)
          }}
    >
      {() => (
        <Form className="space-y-8 divide-y divide-gray-200">
          <div className="sm:col-span-2">
            <label
              htmlFor="name"
            >
              First name
            </label>
            <Field
              type="text"
              name="name"
              id="name"
              autoComplete="given-name"
            />
          </div>
          <div className="flex justify-end">
            <button
              type="submit"
            >
              Submit
            </button>
          </div>
        </Form>
      )}
    </Formik>
  )
}

一切正常，直到我引入这些行：

const formikRef = useRef<FormikProps<FormikValues>>(null)

和

innerRef={formikRef}

现在 const response = await register({ variables: values }) 行中的 variables 是红色下划线的消息：Type 'FormikValues' is missing the following properties from type 'Exact<{ name: string; }>': name ts(2739)

当我运行代码时，该网站运行良好，并且按预期无误地将数据发送到服务器。

如何修复此警告？

编辑：我检查了 FormikValues 类型的定义：

/**
 * Values of fields in the form
 */
export interface FormikValues {
    [field: string]: any;
}

当我添加行 innerRef={formikRef} 时，variables 的类型从字典更改为 FormikValues

Answer 1

问题

FormikValues 类型与 useCreateUserMutation

中 register 函数的签名不匹配

解决方案 1

将 FormikValues 替换为 { name: string }。应该按预期工作。

解决方案 2

为什么我们甚至需要这个 useRef？据我了解，保留 formik ref 的唯一原因是能够使用 setFieldValue。也许你应该看看 useFormik which exports formik API directly or useFormikContext

类型 'FormikValues' 缺少类型 'Exact<{ 中的以下属性

Type 'FormikValues' is missing the following properties from type 'Exact<{

typescript

reactjs

formik

问题

解决方案 1

解决方案 2