Chakra UI + React Hook 表单错误错误类型

Question

我正在尝试使用 ChakraUI 和 React-Hook-Form 在 TypeScript 中创建我的表单。然而，我的错误似乎给我带来了与打字稿相关的问题。我从 chakra 网站上提供的 chakra ui/react-hook-form 模板复制粘贴了这段代码。这是代码：

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'

也许我可以在没有 Chakra 的情况下写它 - 但我想坚持这个应用程序的主题。我将错误类型更改为any，但这并没有多大帮助。

Answer 1

我有完全相同类型的问题。我用以下方法解决了这个问题：

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