type; formikvalues＆＃x27;缺少类型的以下属性
我有以下表格：
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 =等待寄存器（{variables：values}）是红色下划线的消息：类型“ Formikvalues”丢失了类型“ Exact＆lt; {name：string; }＆gt;'：name ts（2739）
我运行代码时，该网站的工作正常，并将数据发送给服务器，因为没有错误。
我该如何解决此警告？
编辑： 我检查了formikvalues类型的定义：
/**
* Values of fields in the form
*/
export interface FormikValues {
[field: string]: any;
}
当我添加行innionRef = {formikref} 变量的类型从字典变为form> formikikvalues
I have the following form:
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>
)
}
Everything was working fine until I introduced the lines:
const formikRef = useRef<FormikProps<FormikValues>>(null)
and
innerRef={formikRef}
Now variables in the line const response = await register({ variables: values }) is red underlined with the message: Type 'FormikValues' is missing the following properties from type 'Exact<{ name: string; }>': name ts(2739)
When I run the code, the website works perfectly fine though and sends the data to the server as expcted with no errors.
How can I fix this warning?
Edit:
I checked the definition of the FormikValues type:
/**
* Values of fields in the form
*/
export interface FormikValues {
[field: string]: any;
}
When I add the line innerRef={formikRef} the type of variables changes from a dictionary to FormikValues
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
问题
formikvalues类型类型与register函数的签名与usecReateusermoont的函数解决方案1
替换
formikikvalues用替换{名称：字符串}。应该按预期工作。解决方案2
为什么我们甚至需要此
useref？据我了解，保持Formik ref的唯一原因是能够使用setFieldValue。也许您应该看一下 useformik 直接导出formik api或 useformikcontextThe problem
FormikValuestype doesn't match signature ofregisterfunction fromuseCreateUserMutationSolution 1
Replace
FormikValueswith{ name: string }. Should work as expected.Solution 2
Why do we even need this
useRef? As I understand the only reason to keep formik ref is to be able to usesetFieldValue. Maybe you should take a look at useFormik which exports formik API directly or useFormikContext