我正在使用 typescript 进行表单注册并做出反应,但是,当我尝试提交 handleSignup 函数时,我面临打字错误。这是我的代码:
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { api } from "../../services/api";
export const Signup = () => {
const schema = yup.object().shape({
name: yup.string(),
email: yup.string(),
pword: yup.string(),
address: yup.object().shape({
zipCode: yup.string(),
number: yup.number(),
complement: yup.string(),
})
})
intece signUpCredentials {
name: string
email: string
pword: string
address: {
zipCode: string
number: number
complement: string
}
}
const {
register,
formState: { errors },
handleSubmit,
} = useForm({
resolver: yupResolver(schema)
})
const handleSignup = ({ address, email, name, pword }: signUpCredentials ) => {
api
.post("/users/signup", { address, email, name, pword })
.then((response) => {
console.log("Created")
})
.catch((err) => {
console.error("Not created")
})
}
return (
<form
onSubmit={handleSubmit(handleSignup)}
>
<input
{...register("name")}
placeholder="name"
/>
<input
{...register("email")}
placeholder="email"
/>
<input
{...register("pword")}
placeholder="pword"
/>
<input
{...register("address.zipCode")}
placeholder="zipCode"
/>
<input
{...register("address.number")}
placeholder="number"
/>
<input
{...register("address.complement")}
placeholder="complement"
/>
<on type="submit" >
Submit
</on>
</form>
)
}
我面临的问题正是 *
onSubmit = {handleSubmit (handleSignup)}
我收到:
“({address,email,name,pword}:signUpCredentials) = & gt;void”类型的参数不可分配给“SubmitHandler”类型的参数。参数“__0”和“data”的类型不兼容。“{[x:string]:any;}”类型缺少“signUpCredentials”类型的以下属性:名称、电子邮件、

您没有将类型变量signUpCredentials
指定给useForm
钩子,您应该将onSubmit
处理程序更改为handleSignup
并调用其中的handleSubmit
。
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { api } from "../../services/api";
export const Signup = () => {
const schema = yup.object().shape({
name: yup.string(),
email: yup.string(),
pword: yup.string(),
address: yup.object().shape({
zipCode: yup.string(),
number: yup.number(),
complement: yup.string(),
})
})
intece signUpCredentials {
name: string
email: string
pword: string
address: {
zipCode: string
number: number
complement: string
}
}
const {
register,
formState: { errors },
handleSubmit,
} = useForm<signUpCredentials>({
resolver: yupResolver(schema)
})
const handleSignup = handleSubmit(data: signUpCredentials) => {
console.log(data)
// do api stuff here
}
return (
<form
onSubmit={handleSignup}
>
<input
{...register("name")}
placeholder="name"
/>
<input
{...register("email")}
placeholder="email"
/>
<input
{...register("pword")}
placeholder="pword"
/>
<input
{...register("address.zipCode")}
placeholder="zipCode"
/>
<input
{...register("address.number")}
placeholder="number"
/>
<input
{...register("address.complement")}
placeholder="complement"
/>
<on type="submit" >
Submit
</on>
</form>
)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
为了更好地理解,我创建了一个Code Sandbox链接,我已经删除了import
语句到服务,因为我们没有,你可以看到函数被调用没有任何警告 / 错误通过检查控制台。
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(8条)