處理 react-hook-form 中的錯誤

Question

根據 react-hook-form 的文檔，我可以使用像“xxx.yyy”這樣的輸入元素的名稱，這將導致我准備好的數據為

{ xxx: { yyy: value }}

但是當我嘗試使用帶有“錯誤”的此功能時，我無法使用它。 即我不能在下面寫：

{errors.xxx.yyy && <span>This field is required</span>}

因為我得到“無法讀取未定義的屬性‘yyy’”。

文檔說我應該使用這個鏈接運算符，?。 ，所以我試試：

{errors?.xxx?.yyy && <span>This field is required</span>}

但是如果省略了必需的輸入，頁面上將不會顯示任何內容。 我可以看到該機制阻止提交表單，直到我在該字段中寫入一些內容，這很好，但是為什么我沒有在頁面上收到錯誤消息？

Answer 1

這真的取決於您使用的是哪個版本。

V3：平面錯誤對象

errors['xxx.yyyy']

V4：具有更好類型支持的嵌套錯誤對象

errors?.xxx?.yyyy

我們還構建了一個ErrorMessage組件，您可能會發現它很有用。

https://react-hook-form.com/api#ErrorMessage

Answer 2

好的，我自己找到了答案。 我應該使用這種形式：

{errors['xxx.yyy'] && 該字段為必填項}

然后一切正常:-)

Answer 3

你不想花你的編碼時間。 您可以手動使用@hookform/error-message而不是代碼。 這很容易。 它會處理這些錯誤。 只需傳遞 react-hook-form 給出的錯誤對象並傳遞要顯示錯誤消息的屬性名稱。

<ErrorMessage errors={errors} name="xxx.yyy" message="This is required" /> 

或者

如果您想根據需要自定義您的消息，您可以按照您的需要進行render ，如下所示。 認為您想用紅色自定義 css 類加粗並顯示無效。 然后您可以根據需要進行渲染。

<ErrorMessage render={({message}) => <div className="invalid-feedback d-block"><b> {message} </b></div>} errors={errors} name="xxx.yyy"/>

NPM https://www.npmjs.com/package/@hookform/error-message