React Hook Form客户端验证提示无法渲染问题求助

我看你遇到的问题是在React Hook Form里动态获取字段错误时碰了壁——硬编码字段名能正常显示错误提示，但用get(errors, name)或者control.getFieldState这类动态方式就拿不到错误，导致验证提示没法正常渲染。咱们来捋捋问题根源，再给你针对性的解决办法：

问题分析 #

你当前的FormInput组件里，useFormState的用法有个关键问题：你传递了name参数给useFormState，这会让它只订阅单个特定字段的局部状态，而不是全局的表单状态。这就导致你解构出来的errors、touchedFields都只是这个字段的局部数据，没法用来动态获取其他字段的错误信息。同时，你传递给control.getFieldState的formState也是局部的，自然拿不到正确的全局字段状态。

解决方案 #

1. 修正useFormState的使用方式 #

移除useFormState的name参数，让它返回全局的表单状态，这样才能支持动态获取任意字段的错误信息：

'use client'
import { useFormState } from "react-hook-form";
import styles from './index.module.css'

export const FormInput = ({ label, name, children, control}) => {
  // 移除name参数，获取全局表单状态
  const { isSubmitted, formState } = useFormState({ control });
  
  // 用control.getFieldState获取当前字段的完整状态（错误、触摸状态等）
  const { error, isTouched } = control.getFieldState(name, formState);
  const errorMessage = error?.message;

  if(name === "alpha2Code") {
    console.log("//////////////////")
    console.log("field name", name)
    console.log("isSubmitted", isSubmitted)
    console.log("isTouched", isTouched)
    console.log("error from getFieldState", error)
    console.log("//////////////////")
  }

  return (
    <div className={styles.forminput}>
      <label htmlFor={name} className={styles.label}>
        {label}
      </label>
      {children}
      <div className={styles.message}>
        {/* 直接用getFieldState返回的isTouched判断，无需额外处理touchedFields */}
        {error && (isTouched || isSubmitted) && (
          <div className={styles.managementformgriderror}>
            {errorMessage}
          </div>
        )}
      </div>
    </div>
  );
}

2. 备选方案：通过useFormContext获取全局状态 #

如果你的FormInput组件在FormProvider的范围内，也可以直接用useFormContext获取全局表单状态，动态提取字段错误：

'use client'
import { useFormContext, get } from "react-hook-form";
import styles from './index.module.css'

export const FormInput = ({ label, name, children, control}) => {
  const { formState: { touchedFields, isSubmitted, errors } } = useFormContext();
  
  // 用get方法动态从全局errors中提取当前字段的错误
  const error = get(errors, name);
  const touched = get(touchedFields, name);
  const errorMessage = error?.message;

  return (
    <div className={styles.forminput}>
      <label htmlFor={name} className={styles.label}>
        {label}
      </label>
      {children}
      <div className={styles.message}>
        {error && (touched || isSubmitted) && (
          <div className={styles.managementformgriderror}>
            {errorMessage}
          </div>
        )}
      </div>
    </div>
  );
}

关键说明 #

• control.getFieldState是React Hook Form官方推荐的获取单个字段状态的方式，它会自动处理嵌套字段路径，性能也更优。
• 避免给useFormState传递name参数，除非你明确只需要监听单个字段的局部状态。
• 确保TextInput传递的dict.key和validationSchema中的字段名完全一致（比如alpha2Code不能拼写错误）。

修改后，你应该就能通过动态字段名正常获取错误信息，验证提示也会按预期显示了。

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