在循环中使用React-hook-form时如何获取对应错误信息

我来帮你搞定这个问题！你遇到的核心问题就是动态生成的输入字段和错误信息没有正确绑定，主要是两处细节没处理到位，咱们一步步改：

1. 错误信息的动态访问 #

你原来写的errors.head?.message是在访问errors对象里名为"head"的固定属性，但这里的head是循环变量，得用方括号语法来动态访问对象属性，这样才能拿到当前循环项对应的错误信息：

<small className="text-danger">{errors[head]?.message}</small>

2. 输入框的name属性绑定 #

你的createInput函数里把name写死成了字符串"head"，这会导致所有输入框的name都是同一个值，React Hook Form根本没法区分不同字段。要把name改成动态的变量值：

function createInput(head){ 
  return <input type="text" name={head} {...register(head)} /> 
}

修正后的完整代码片段 #

把这两处改完，你的循环部分和输入框就能正确关联错误信息了：

{Object.getOwnPropertyNames(row)?.map((head) => { 
  return ( 
    <div key={head} className="row my-2"> 
      <div className="col-5">{createHeads(head)}</div> 
      <div className="col-7">{createInput(head)}</div> 
      <div className="col-12"> 
        <small className="text-danger">{errors[head]?.message}</small> 
      </div> 
    </div> 
  ); 
})}

另外补充个小提示：确保你的Yup验证schema里，也对应每个head字段设置了正确的验证规则，这样React Hook Form才能生成对应的错误信息哦~

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