处理 react-hook-form 中的错误
Handling errors in react-hook-form
根据 react-hook-form 的文档，我可以像这样使用输入元素的名称 "xxx.yyy"，这将使我准备好的数据成为
{ xxx: { yyy: value }}
但是当我尝试将此功能与 'errors' 一起使用时，我无法使用它。即我不能在下面写：
{errors.xxx.yyy && <span>This field is required</span>}
因为我得到 "Cannot read property 'yyy' of undefined".
Documentation 说我应该使用这个链接运算符 ?。 , 所以我试试:
{errors?.xxx?.yyy && <span>This field is required</span>}
但如果省略所需的输入，页面上不会显示任何内容。我可以看到该机制阻止表单提交，直到我在此字段中写入内容，这没问题，但为什么我没有在页面上收到错误消息？
好的，我自己找到了答案。我应该使用这种形式：
{错误['xxx.yyy'] && 此字段为必填项}
然后一切正常:-)
这真的取决于您使用的是哪个版本。
V3：平面错误对象
errors['xxx.yyyy']
V4：具有更好类型支持的嵌套错误对象
errors?.xxx?.yyyy
我们还构建了一个 ErrorMessage 组件，您可能会发现它很有用。
您不想花费编码时间。您可以使用 @hookform/error-message 而不是手动编码。这很容易。它将管理这些错误。
只需传递 react-hook-form 给出的错误对象并传递要显示错误消息的 属性 名称。
<ErrorMessage errors={errors} name="xxx.yyy" message="This is required" />
或
如果您想根据需要自定义您的消息，您可以 render 如下所示。
认为您想用红色自定义 css class 加粗并显示无效。然后你可以随心所欲地渲染。
<ErrorMessage render={({message}) => <div className="invalid-feedback d-block"><b> {message} </b></div>} errors={errors} name="xxx.yyy"/>
根据 react-hook-form 的文档，我可以像这样使用输入元素的名称 "xxx.yyy"，这将使我准备好的数据成为
{ xxx: { yyy: value }}
但是当我尝试将此功能与 'errors' 一起使用时，我无法使用它。即我不能在下面写：
{errors.xxx.yyy && <span>This field is required</span>}
因为我得到 "Cannot read property 'yyy' of undefined".
Documentation 说我应该使用这个链接运算符 ?。 , 所以我试试:
{errors?.xxx?.yyy && <span>This field is required</span>}
但如果省略所需的输入，页面上不会显示任何内容。我可以看到该机制阻止表单提交，直到我在此字段中写入内容，这没问题，但为什么我没有在页面上收到错误消息？
好的，我自己找到了答案。我应该使用这种形式：
{错误['xxx.yyy'] && 此字段为必填项}
然后一切正常:-)
这真的取决于您使用的是哪个版本。
V3：平面错误对象
errors['xxx.yyyy']
V4：具有更好类型支持的嵌套错误对象
errors?.xxx?.yyyy
我们还构建了一个 ErrorMessage 组件，您可能会发现它很有用。
您不想花费编码时间。您可以使用 @hookform/error-message 而不是手动编码。这很容易。它将管理这些错误。
只需传递 react-hook-form 给出的错误对象并传递要显示错误消息的 属性 名称。
<ErrorMessage errors={errors} name="xxx.yyy" message="This is required" />
或
如果您想根据需要自定义您的消息，您可以 render 如下所示。
认为您想用红色自定义 css class 加粗并显示无效。然后你可以随心所欲地渲染。
<ErrorMessage render={({message}) => <div className="invalid-feedback d-block"><b> {message} </b></div>} errors={errors} name="xxx.yyy"/>