Chakra UI +表单错误类型

Question

我正在尝试使用ChakraUI和React Hook- form在TypeScript中创建我的表单。然而，我的错误给我带来了与打字稿有关的问题。我复制粘贴这个代码从脉轮ui/反应钩子模板提供在脉轮的网站。以下是代码：

import {
  Box,
  Heading,
  FormErrorMessage,
  FormLabel,
  FormControl,
  Input,
  Button,
  Text,
  FormHelperText,
} from '@chakra-ui/react'
import React from 'react'
import styles from '../../theme/styles'
import textStyles from '../../theme/text-styles'
import { useForm } from 'react-hook-form'

const DescribeCargo = () => {
  const {
    handleSubmit,
    register,
    formState: { errors, isSubmitting },
  } = useForm()

  function onSubmit(values: any) {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log(JSON.stringify(values, null, 2))
        resolve(values)
      }, 3000)
    })
  }

  return (
    <>
      <Box {...styles.bodyContainer}>
        <Heading {...textStyles.componentHeader} my={7} as='h3'>
          Describe the cargo
        </Heading>
        <form onSubmit={handleSubmit(onSubmit)}>
          <FormControl isInvalid={errors.name}>
            <FormLabel htmlFor='name'>First name</FormLabel>
            <Input
              id='name'
              placeholder='name'
              {...register('name', {
                required: 'This is required',
                minLength: { value: 4, message: 'Minimum length should be 4' },
              })}
            />
            <FormErrorMessage>{errors.name && errors.name.message}</FormErrorMessage>
          </FormControl>
          <FormControl isInvalid={errors.lastname}>
            <FormLabel htmlFor='lastname'>Last name</FormLabel>
            <Input
              id='lastname'
              placeholder='lastname'
              {...register('lastname', {
                required: 'This is required',
                minLength: { value: 8, message: 'Minimum length should be 8' },
              })}
            />
            <FormErrorMessage>{errors.lastname && errors.lastname.message}</FormErrorMessage>
          </FormControl>
          <Button mt={4} colorScheme='teal' isLoading={isSubmitting} type='submit'>
            Submit
          </Button>
        </form>
      </Box>
    </>
  )
}

export default DescribeCargo

这里是我得到的错误：

TS2322: Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>> | undefined' is not assignable to type 'ReactNode'.
  Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>>' is not assignable to type 'ReactNode'.
    Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>>' is missing the following properties from type 'ReactPortal': key, children, type, props
    48 |               })}
    49 |             />
  > 50 |             <FormErrorMessage>{errors.name && errors.name.message}</FormErrorMessage>
       |                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    51 |           </FormControl>
    52 |           <FormControl isInvalid={errors.lastname}>
    53 |             <FormLabel htmlFor='lastname'>Last name</FormLabel>

TS2322: Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>> | undefined' is not assignable to type 'boolean | undefined'.
  Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>>' is not assignable to type 'boolean | undefined'.
    38 |         </Heading>
    39 |         <form onSubmit={handleSubmit(onSubmit)}>
  > 40 |           <FormControl isInvalid={errors.name}>
       |                        ^^^^^^^^^
    41 |             <FormLabel htmlFor='name'>First name</FormLabel>
    42 |             <Input
    43 |               id='name'

也许我可以写它没有脉轮-但我想坚持这个应用的主题。我将错误类型改为任何错误，但这并没有多大帮助。

Answer 1

我也有同样的问题。我用以下方法解决这个问题：

<FormErrorMessage>
    {errors.title && errors.title.message?.toString()}
</FormErrorMessage>

Answer 2

我不知道chakra，但是问题是来自useForm钩子的useForm类型和children类型的FormErrorMessage是不同的。对于第一个错误，请尝试像这样进行更新

<FormErrorMessage>
    <Text>{errors.name && errors.name.message}</Text>
</FormErrorMessage>

对于第二个错误，isInvalid道具期望boolean或undefined。因此，您必须将errors.name转换为boolean

<FormControl isInvalid={Boolean(errors.name)}>

如果名称字段出现错误，则errors.name将不为空，Boolean(errors.name)为true。

Answer 3

创建一个接口，关闭组件

interface IFormInputs {
  name: string;
  lastname: string;
}

然后将接口分配给useForm钩子

const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm<IFormInputs>();

这应该能解决这个问题。