Несогласованность типов между функцией register () формы react-hook-form и собственными типами ввода

Я работаю над проектом React с использованием TypeScript и response-hook-form. В некоторых местах я использую данную функцию register (), которую нужно использовать таким образом (согласно официальной документации):

<input
  name="test"
  ref={
    register({
      required: true
    })
  }
/>

Проблема, с которой я столкнулся, заключается в том, что эта функция набрана таким образом, что она возвращает void:

(Ref, validateRule?) => void

Но атрибут ref собственного тега input должен иметь тип:

string | ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined

Естественно, TypeScript выдает мне эту ошибку:

Тип «void» не может быть присвоен типу «строка | ((instance: HTMLInputElement | null) => void) | RefObject | null | неопределенный'

У вас есть идея, как я могу использовать эту библиотеку, уважая типы? Это ошибка самой библиотеки?


reactjs typescript javascript react-hook-form
person johannchopin    schedule 08.04.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел уже решенные ответы по проекту, связанному с Github: https://github.com/react-hook-form/react-hook-form/issues?q=is%3Aissue+is%3Aclosed+register+void+is+not+assignable+to+type

Похоже, это зависит от того, что вы подключаете к опоре ref. Может быть, подумайте об инициализации этого на useEffect?

Обратитесь к этой проблеме: https://github.com/react-hook-form/react-hook-form/issues/598 перенаправить себя на документацию по управляемым компонентам (может быть в вашем случае). Вам, вероятно, следует использовать способ useEffect, например:

const Comp = () => {
  const { register } = useForm()

  React.useEffect(() => {
    register({ name: "nameOfMyInput" })
  })

  return (
    <input name="nameOfMyInput" />
  )
}
person HollyPony    schedule 08.04.2020
comment
Спасибо за всю эту информацию. Я рекомендую вам добавить путь к правильной проблеме и также предоставить пример того, что будет с решением. Избегайте ответов «только внешняя ссылка»;) Когда это будет сделано, я validate и upvote ваш ответ. - person johannchopin; 08.04.2020
comment
Дело в том, что я не уверен, какой именно в вашем случае. Но я могу предположить одно :). Редактировать входящие - person HollyPony; 08.04.2020