Skip to main content

[note] React Hook From

react-hook-form @ official website

API#

Controller & useController#

react-hook-form 傾向使用 uncontrolled components 和瀏覽器原生的表單,但不可避免的有時會需要使用到 controlled components(例如搭配 material UI 或 Antd),這時候就可以使用 <Controller /> 這個 wrapper。

FormProvider & useFromContext#

如果表單內的元件很深,又希望不要透過 props 一直將 react-hook-form 的方法透過 props 傳遞到該元件內時,可以在最外層使用 <FormProvider />,如此在該 Provider 內的子層元件,即可使用 useFormContext 的方式取得 react-hook-form 提供的各種方法。

常見問題#

Property 'message' does not exist on type#

keywords: NestedValue#

在表單中,當欄位的選項是存成 Array 時,例如像 Tag 這類的 Input:

type FormValues = {
tags: string[];
}

如果想要透過 errors.tags.message 取用驗證的錯誤訊息時,會出現類似 Property 'message' does not exist on type' 的錯誤:

Imgur

要解決這個問題可以使用 react-hook-form 提供的 NestedValue。使用的方式,只需要再定義該欄位的定方,型別使用:

import { NestedValue } from "react-hook-form";
type FormValues = {
tags: NestedValue<string[]>
}

如果你用了之後,再定義 defaultValues 的地方不斷出現類似 Property [$NestedValue]' is missing in type 'never[]' but ... 的錯誤。

這時候可以透過 npm uninstall react-hook-form 再把它重新安裝一下的即可(和 react-hook-form 的版本沒有直接關係,感覺是 package-lock.json 的影響)。

Last updated on