React Hook Form中如何通过变量获取动态输入框的校验错误？

在React Hook Form中，当表单字段名是动态变量时，不能用.语法访问errors对象的属性，必须使用方括号语法来获取对应字段的错误信息，具体写法是errors[opcion.input_mostrar]。

修正后的代码示例 #

假设你的循环渲染逻辑如下，替换错误判断的写法后就能正常显示校验错误：

{opciones.map(opcion => {
  if (!opcion.checked) return null;
  
  return (
    <div key={opcion.id}>
      <input
        {...register(opcion.input_mostrar, {
          required: '请填写此字段',
          // 可添加其他校验规则
        })}
        placeholder={`请输入${opcion.label}`}
      />
      {/* 用方括号语法获取动态字段的错误 */}
      {errors[opcion.input_mostrar] && (
        <span style={{ color: 'red', fontSize: '0.8rem' }}>
          {errors[opcion.input_mostrar].message}
        </span>
      )}
    </div>
  );
})}

原写法无效的原因 #

• errors.{opcion.input_mostrar}：这是错误的JavaScript语法，即便用模板字符串拼接也没必要——直接传入变量即可，不需要额外拼接成字符串。
• errors.opcion.input_mostrar：这种写法会去查找errors对象中名为opcion的固定属性，而非你循环里的opcion变量，自然无法匹配到正确的字段错误。

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