根据react-hook-form的文档，我可以使用输入元素的名称，例如“ xxx.yyy”，这将导致我准备的数据为
{ xxx: { yyy: value }}
但是当我尝试将此功能与“错误”一起使用时，我将无法使用它。即我不能在下面写：
{errors.xxx.yyy && <span>This field is required</span>}
因为我得到“无法读取未定义的属性'yyy'”。
Documentation说我应该使用此链接运算符？。 ，所以我尝试：
{errors?.xxx?.yyy && <span>This field is required</span>}
但是，如果忽略了必需的输入，则页面上不显示任何内容。我可以看到该机制阻止了表单的提交，直到我在该字段中写点东西为止，这是可以的，但是为什么我在页面上没有收到错误消息？
答案 0 :(得分：1)
好的，我自己回答了。我应该使用这种形式：
{errors ['xxx.yyy'] &&此字段为必填项}
然后一切正常：-）
答案 1 :(得分：1)
您不想花费编码时间。您可以手动使用 @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"/>
答案 2 :(得分：0)
这实际上取决于您使用的版本。
V3：平面错误对象
errors['xxx.yyyy']
V4：具有更好类型支持的嵌套错误对象
errors?.xxx?.yyyy
我们还构建了一个ErrorMessage组件，您可能会发现它很有用。