React Hook Form：useFormState Hook

請注意！本文的版本資訊如下：
React v18.2.0
React Hook Form v7.45.1

前言 - Prologue

在開發表單驗證和處理邏輯時，獲取表單的狀態是非常重要的。而 React Hook Form 的出現為表單處理帶來了革命性的變革。使用 React Hook Form，我們可以以簡單且直觀的方式處理表單驗證，並管理表單的狀態。

其中 React Hook Form 提供了 useFormState hook，該 hook 返回了一個對象，其中包含了許多有用的屬性，使我們能夠輕鬆地獲取和操控表單的狀態。

正文 - Main text

This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.

這個自訂的 Hook 允許你訂閱每個表單狀態，並在自訂的 Hook 層級上進行重新渲染的隔離。它在表單狀態訂閱方面有它自己的範圍，因此不會影響其他 useFormState 和 useForm。使用這個 Hook 可以減少對大型和複雜的表單應用程式的重新渲染影響。

一一 以上取自官方

---

useFormState 支持的所有屬性概述：

屬性名稱	描述
isDirty	表示表單是否被修改過。
dirtyFields	包含所有被修改過的表單欄位的名稱的陣列。
touchedFields	包含所有被觸碰過的表單欄位的名稱的陣列。
isSubmitted	表示表單是否已經被提交過。
isSubmitSuccessful	表示表單是否已成功提交且通過驗證。
isSubmitting	表示表單是否正在提交。
isLoading	表示表單是否正在加載中，通常用於處理非同步操作。
submitCount	表示表單的提交次數。
isValid	表示表單是否有效。
isValidating	表示表單是否正在進行驗證。
errors	包含表單欄位錯誤的對象。

---

defaultValues

The value which has been set at useForm's defaultValues or updated defaultValues via reset API.

這個值是在 useForm 的 defaultValues 中設定的，或者是透過 reset API 更新的 defaultValues。

用於設置表單欄位的初始值。

• Type: object

這個選項可以接受一個對象作為值，該對象的鍵值對應於表單中的欄位名稱，而值則表示該欄位的初始值。

使用 defaultValues 可以在表單初始化時自動填充預設值，使得使用者在輸入之前就能看到預先填充的資料。

isDirty

表示表單是否被修改過。

• Type: boolean

如果任何表單欄位的值與初始值不同，則被視為 "dirty"（被修改過）。

dirtyFields

一個包含所有被修改過的表單欄位的名稱的陣列。

• Type: object

當使用者修改表單欄位時，這個屬性將被更新。

touchedFields

一個包含所有被觸碰過（焦點進入）的表單欄位名稱的陣列。

• Type: object

當使用者進入表單欄位時，這個屬性將被更新。

isSubmitted

表示表單是否已經被提交過。

• Type: boolean

當表單成功提交並通過驗證時，isSubmitted 的值將變為 true。

isSubmitSuccessful

表示表單是否已成功提交且通過驗證。

• Type: boolean

當表單成功提交且後端驗證通過時，isSubmitSuccessful 的值將變為 true。

isSubmitting

表示表單是否正在提交。

• Type: boolean

當提交函數被調用時，isSubmitting 的值將為 true，直到提交完成或出現錯誤。

isLoading

表示表單是否正在加載中，通常用於處理非同步操作。

• Type: boolean

當非同步操作開始時，可以將 isLoading 設置為 true，並在操作完成後將其設置回 false。

Important: this prop is only applicable to async defaultValues.

submitCount

表示表單的提交次數。

• Type: number

每次成功提交表單時，submitCount 的值都會增加。

isValid

表示表單是否有效。

• Type: boolean

當表單的所有驗證規則都通過且沒有錯誤時，isValid 的值將為 true。

setError has no effect on isValid formState, isValid will always derived via the entire form validation result.

在 isValid 的 formState 上使用 setError 不會有任何效果，isValid 的值始終是通過整個表單驗證結果來推斷的。

isValidating

表示表單是否正在進行驗證。

• Type: boolean

當驗證規則在表單欄位上執行時，isValidating 的值將為 true。

errors

一個包含表單欄位錯誤的對象。

• Type: object

當表單驗證失敗時，errors 將包含相應的錯誤資訊。

An object with field errors. There is also an ErrorMessage component to retrieve error message easily.

後記 - Epilogue

使用 useFormState hook 可以方便地獲取表單的各種狀態，並根據這些狀態來進行相應的處理和顯示。更深入地了解 useFormState 的使用方法，可以在實際開發中更好地應用它來提升表單的驗證和處理能力。

也是老話，想了解更多或是資訊版本錯誤，一切以官方檔案為主YO

這只是筆記！筆記！筆記！因為很重要所以說三次。

參考資料 - Reference

[1] useFormState

https://react-hook-form.com/docs/useformstate