React Hook Form子组件（Input组件）中输入错误验证的处理方法

我看了你的代码，问题主要出在Input组件里获取错误信息的方式上，咱们一步步来修正：

核心问题：错误字段的访问方式错误 #

你在Input组件里定义了const inp = extraData.name，但判断错误时用了errors.inp?.type === 'required'——这里的.运算符会直接去errors对象里找名为inp的属性，而不是你变量inp对应的值（比如"name"或"Family"）。正确的做法是用方括号语法来访问动态属性：errors[inp]。

修正后的Input组件 #

另外，咱们还可以优化一下错误显示的逻辑，不用单独判断data.required，只要对应字段存在错误就渲染提示，同时支持显示不同验证规则的错误信息：

import { Fragment } from 'react';

const Input = ({ data, extraData, register, errors }) => {
  const fieldName = extraData.name;
  const fieldError = errors[fieldName];
  
  return <Fragment>
    { extraData.id && extraData.label && <label htmlFor={extraData.id}>{extraData.label}</label> }
    <input {...register(fieldName, {...data})} {...extraData} />
    {/* 只要字段有错误就显示提示 */}
    {fieldError && (
      <p className="error-message">
        {fieldError.type === 'required' && '此字段为必填项'}
        {fieldError.type === 'minLength' && `长度不能少于${data.minLength}个字符`}
        {fieldError.type === 'maxLength' && `长度不能超过${data.maxLength}个字符`}
      </p>
    )}
  </Fragment>
};

export default Input;

关键修改说明 #

1. 动态访问错误字段：用errors[fieldName]代替errors.inp，这样就能拿到对应字段（比如"name"或"Family"）的错误对象。
2. 简化错误渲染逻辑：不再单独判断data.required，只要fieldError存在就渲染错误提示，覆盖所有验证规则的错误。
3. 多类型错误提示：根据错误的type属性，显示不同的提示文本，让用户更清楚哪里出了问题。

为什么原代码不生效？ #

因为errors.inp相当于访问errors['inp']，而你的表单字段名是"name"和"Family"，所以errors对象里根本没有inp这个属性，自然不会显示错误提示。

额外优化建议 #

你可以给错误提示加个类名（比如error-message），方便用CSS设置样式，让错误信息更显眼。

内容的提问来源于stack exchange，提问作者Mohammad Reza Zolfaghari