如何解决使用 React-Hook-Form 验证 React Sematic UI Form 时出现的 TypeScript 错误？

Question

我正在为 注册表单 使用语义 UI。成功创建 Form 后，我想使用 React-Hook-Form 向 Form 添加验证。 我遇到的错误，在 newUser in dispatch 方法中突出显示 并且与 TypeScript 有关。我尝试在 React-Hook-Form 网站的 documentation 后面添加 types，但无法解决。
如有任何帮助，我们将不胜感激。
这是我遇到的错误

No overload matches this call.
  Overload 1 of 3, '(rules?: Partial<{ required: string | boolean | ValidationValueMessage<boolean>; min: ValidationRule<ReactText>; max: ValidationRule<ReactText>; maxLength: ValidationRule<...>; minLength: ValidationRule<...>; pattern: ValidationRule<...>; validate: Validate | Record<...>; }> | undefined): (ref: HTMLInputElement | ... 15 more ... | null) => void', gave the following error.
    Type '{ firstName: string; lastName: string; email: string; password: string; }' has no properties in common with type 'Partial<{ required: string | boolean | ValidationValueMessage<boolean>; min: ValidationRule<ReactText>; max: ValidationRule<ReactText>; maxLength: ValidationRule<...>; minLength: ValidationRule<...>; pattern: ValidationRule<...>; validate: Validate | Record<...>; }>'.
      Type '{ firstName: string; lastName: string; email: string; password: string; }' is not assignable to type 'CustomElement<Inputs> & CustomElement<Record<string, any>>'.
        Property 'name' is missing in type '{ firstName: string; lastName: string; email: string; password: string; }' but required in type 'CustomElement<Inputs>'.  TS2769

    54 |                }
    55 | 
  > 56 |                dispatch(register(newUser))

并注册组件

import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { useHistory, Link } from 'react-router-dom'
import { useForm } from 'react-hook-form'
import {
    Form,
    Segment,
    Grid,
    Button,
    Card,
    Icon,
    Header,
} from 'semantic-ui-react'

import { register } from '../../../redux/User/UserActions'

type Inputs = {
    firstName: string
    lastName: string
    password: string
    email: string
}

const Register = () => {
    const { register, handleSubmit } = useForm<Inputs>()
    const dispatch = useDispatch()
    const history = useHistory()

    const [user, setUser] = useState({
        firstName: '',
        lastName: '',
        email: '',
        password: '',
    })

    const { firstName, lastName, email, password } = user

    const onChange: React.ReactEventHandler<HTMLInputElement> = (e: any) => {
        let { name, value } = e.currentTarget
        setUser({
            ...user,
            [name]: value,
        })
    }

    const handleFormSubmit = (e: any) => {
        e.preventDefault()

        const newUser = {
            firstName: firstName,
            lastName: lastName,
            email: email,
            password: password,
        }

        dispatch(register(newUser))
    }

    function handleClick() {
        if (!history) {
            return <div>No country</div>
        } else {
            history.push('/home')
        }
    }

    const registerFormValid =
        !firstName?.length ||
        !lastName?.length ||
        !password?.length ||
        !email?.length

    return (
        <>
            <Card.Group itemsPerRow={4} centered style={{ margin: 0 }}>
                <Button color="teal" onClick={handleClick}>
                    <Icon name="home"> </Icon>
                    Home
                </Button>
            </Card.Group>
            <Grid centered>
                <Grid.Column style={{ maxWidth: 550, marginTop: 20 }}>
                    <Header as="h2" color="teal" textAlign="center">
                        Create an Account
                    </Header>
                    <Segment>
                        <Form>
                            <Form.Field>
                                <Form.Input
                                    value={firstName}
                                    onChange={onChange}
                                    name="firstName"
                                    placeholder="First Name"
                                    label="First Name"
                                    ref={register}
                                />
                            </Form.Field>
                            <Form.Field>
                                <Form.Input
                                    value={lastName}
                                    onChange={onChange}
                                    name="lastName"
                                    placeholder="Last Name"
                                    label="Last Name"
                                    ref={register}
                                />
                            </Form.Field>
                            <Form.Field>
                                <Form.Input
                                    type="email"
                                    value={email}
                                    onChange={onChange}
                                    name="email"
                                    placeholder="Email"
                                    label="Email"
                                    ref={register}
                                />
                            </Form.Field>
                            <Form.Field>
                                <Form.Input
                                    value={password}
                                    onChange={onChange}
                                    type="password"
                                    name="password"
                                    placeholder="Password"
                                    label="Password"
                                    ref={register({ required: true })}
                                />
                            </Form.Field>

                            <Button
                                onSubmit={handleSubmit(handleFormSubmit)}
                                fluid
                                color="teal"
                                type="submit"
                                disabled={registerFormValid}
                            >
                                Submit
                            </Button>
                        </Form>

                        <Segment>
                            Already have an account?
                            <Link to="/login">Login</Link>.
                        </Segment>
                    </Segment>
                </Grid.Column>
            </Grid>
        </>
    )
}

export default Register

Answer 1

刚注意到，您使用了 2 个同名变量 register。

 import { register } from '../../../redux/User/UserActions'
 const { register, handleSubmit } = useForm<Inputs>()

我猜你想要的 register 是 redux 动作，但是你的 handleFormSubmit 采取了更接近的动作（react-hook-form 的 register），这导致了 TS 错误。

尝试用更明确的含义重命名它们。