如何在react-hook-form中正确注册嵌套对象属性？

问题根源在于你手动给input设置了name="facebook"，覆盖了register("social.facebook")自动生成的name属性。React Hook Form依赖input的name属性关联表单字段，手动指定的name和register的路径不匹配，导致无法正确追踪嵌套字段的输入值，进而触发持续的验证错误，且RHF devtools无法识别字段变化。

解决方法：删除input上手动设置的name="facebook"属性，让register方法自动生成正确的name值（即social.facebook）。修改后的代码如下：

<label htmlFor="facebook">
  Facebook
</label>
<input
  {...register("social.facebook", {
    required: "Facebook required",
  })}
  type="text"
  id="facebook"
/>
<p className="text-red-500">{errors.social?.facebook?.message}</p>

修改后，表单会正确关联嵌套的social.facebook字段，输入内容时RHF devtools将正常响应，验证逻辑也会按预期工作。

内容的提问来源于stack exchange，提问作者Mehmet Emre Topdal