如何在typescript中的react钩子表单上发送 handleSubmit

我正在使用 typescript 进行表单注册并做出反应,但是,当我尝试提交 handleSignup 函数时,我面临打字错误。这是我的代码:

我正在使用 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(),
        password: yup.string(),
        address: yup.object().shape({
            zipCode: yup.string(),
            number: yup.number(),
            complement: yup.string(),
        })
    })
    
    intece signUpCredentials {
        name: string 
        email: string
        password: string 
        address: {
            zipCode: string 
            number: number 
            complement: string 
        } 
    }
    const {
        register,
        formState: { errors },
        handleSubmit,
    } = useForm({
        resolver: yupResolver(schema)
    })
    const handleSignup = ({ address, email, name, password }: signUpCredentials ) => {
        api
            .post("/users/signup", { address, email, name, password })
            .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("password")}
                placeholder="password"
            />
            <input
                {...register("address.zipCode")}
                placeholder="zipCode"
            />
            <input
                {...register("address.number")}
                placeholder="number"
            />
            <input
                {...register("address.complement")}
                placeholder="complement"
            />
            <button type="submit" >
                Submit
            </button>
        </form>
    )
}

我面临的问题正是 *

onSubmit = {handleSubmit (handleSignup)}

我收到:

“({address,email,name,password}:signUpCredentials) = & gt;void”类型的参数不可分配给“SubmitHandler”类型的参数。参数“__0”和“data”的类型不兼容。“{[x:string]:any;}”类型缺少“signUpCredentials”类型的以下属性:名称、电子邮件、

0

您没有将类型变量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(),
        password: yup.string(),
        address: yup.object().shape({
            zipCode: yup.string(),
            number: yup.number(),
            complement: yup.string(),
        })
    })
    
    intece signUpCredentials {
        name: string 
        email: string
        password: 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("password")}
                placeholder="password"
            />
            <input
                {...register("address.zipCode")}
                placeholder="zipCode"
            />
            <input
                {...register("address.number")}
                placeholder="number"
            />
            <input
                {...register("address.complement")}
                placeholder="complement"
            />
            <button type="submit" >
                Submit
            </button>
        </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语句到服务,因为我们没有,你可以看到函数被调用没有任何警告 / 错误通过检查控制台。

Edit loving-brahmagupta-09dizp

Ref:React Hook form (TS)

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(406)
什么是“参数相关查找”(又名ADL或“Koenig查找”)
上一篇
如何在React组件中导入CSS文件
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(67条)