React Hook Form：如何显示嵌套名称字段的错误信息？

你遇到的问题根源在于：当用register("test.new", { required: true })注册字段时，React Hook Form会把整个"test.new"当作单一的字符串键存在errors对象里，而不是解析成test对象下嵌套的new属性。所以直接用errors.test.new访问会失败——因为errors里根本没有test这个属性，只有键为"test.new"的条目。

下面给你两种可行的解决办法：

方法1：用方括号访问字符串键 #

直接通过方括号语法获取errors中对应字符串键的错误信息，这是最直接的修正方式：

{errors["test.new"] && <p style={{ color: "yellow" }}>This field is required</p>}

方法2：改用规范的嵌套字段注册（推荐） #

如果你希望字段是嵌套对象结构（比如test对象下的new属性），可以换成数组语法注册字段，这样React Hook Form会自动生成嵌套的errors结构：

// 注册时使用数组语法
register("test[new]", { required: true })

// 之后就能用点语法+可选链安全访问错误信息了
{errors?.test?.new && <p style={{ color: "yellow" }}>This field is required</p>}

这里的可选链?.是为了避免errors.test不存在时抛出Cannot read property 'new' of undefined的错误，让代码更健壮。

简单总结：如果只是临时用带点的字段名，方法1足够解决问题；如果是想构建清晰的嵌套数据结构，方法2更符合React Hook Form的设计逻辑，也方便后续对嵌套字段的批量操作。

内容的提问来源于stack exchange，提问作者Santhosh