reactjs - 处理 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>}

但是，如果省略所需的输入，则页面上不会显示任何内容。我可以看到该机制阻止提交表单，直到我在该字段中写入内容，这没关系，但为什么我没有在页面上收到错误消息？

score 2 · Accepted Answer

这真的取决于你使用的是哪个版本。

V3：平面错误对象

errors['xxx.yyyy']

V4：具有更好类型支持的嵌套错误对象

errors?.xxx?.yyyy

我们还构建了一个ErrorMessage组件，您可能会发现它很有用。

score 1 · Accepted Answer

好的，我自己找到了答案。我应该使用这种形式：

{errors['xxx.yyy'] && 此字段为必填项}

然后一切正常:-)

score 1 · Accepted Answer

你不想花费你的编码时间。您可以@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"/>

3 回答 3