如何在React Hook Form的useFieldArray中显示错误提示

技术栈 #

• JavaScript
• React
• React Hook Form
• Material UI

需求 #

表单提交时，输入值为空需展示错误提示。

问题 #

输入项位于多对象数组中，无法通过${fieldArrayName}.${index}.os路径正确访问errors对象获取错误信息。

已尝试方案 #

• 使用register替代Controller并设置必填规则与提示信息；
• 尝试通过errors[fieldArrayName[index].os].message访问错误信息，未成功；
• 引入@hookform/error-message的ErrorMessage组件，触发报错：Cannot read properties of null (reading 'formState')。

相关组件代码 #

import {
  FormControl,
  FormHelperText,
  InputLabel,
  MenuItem,
  Select,
} from '@mui/material';
import React from 'react';
import { ErrorMessage } from '@hookform/error-message';
import { Controller } from 'react-hook-form';

export const Os = ({ fieldArrayName, index, register, control, errors }) => {
  return (
    <FormControl>
      <InputLabel id="demo-simple-select-label">Os</InputLabel>
      <Controller
        name={`${fieldArrayName}.${index}.os`}
        control={control}
        defaultValue=""
        rules={{ required: true }}
        render={({ field }) => (
          <Select
            {...field}
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            label="Os"
          >
            <MenuItem value="windows">Windows</MenuItem>
            <MenuItem value="linux">Linux</MenuItem>
          </Select>
        )}
      />{' '}
      <FormHelperText error={true}></FormHelperText>
    </FormControl>
  );
};

尝试的ErrorMessage代码 #

<ErrorMessage errors={errors} name={`${fieldArrayName}.${index}.os`} />

解决方案 #

方案1：利用Controller返回的fieldState获取错误信息 #

React Hook Form的Controller组件在render回调中会提供fieldState参数，其中包含当前字段的错误状态，无需手动拼接路径访问外部errors对象。修改后的代码如下：

import {
  FormControl,
  FormHelperText,
  InputLabel,
  MenuItem,
  Select,
} from '@mui/material';
import React from 'react';
import { Controller } from 'react-hook-form';

export const Os = ({ fieldArrayName, index, control }) => {
  return (
    <FormControl error={!!fieldState.error}>
      <InputLabel id="demo-simple-select-label">Os</InputLabel>
      <Controller
        name={`${fieldArrayName}.${index}.os`}
        control={control}
        defaultValue=""
        rules={{ required: '操作系统为必填项' }}
        render={({ field, fieldState }) => (
          <>
            <Select
              {...field}
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              label="Os"
            >
              <MenuItem value="windows">Windows</MenuItem>
              <MenuItem value="linux">Linux</MenuItem>
            </Select>
            {fieldState.error && (
              <FormHelperText error>{fieldState.error.message}</FormHelperText>
            )}
          </>
        )}
      />
    </FormControl>
  );
};

方案2：正确使用嵌套路径访问errors对象 #

如果需要通过外部传入的errors对象获取错误，要注意数组字段的访问方式，使用可选链运算符避免空值报错：

// 在Os组件的FormHelperText中修改
<FormHelperText error={!!errors[fieldArrayName]?.[index]?.os}>
  {errors[fieldArrayName]?.[index]?.os?.message || ''}
</FormHelperText>

方案3：修复ErrorMessage组件的使用问题 #

报错Cannot read properties of null (reading 'formState')通常是因为未正确传递errors对象或依赖版本问题。确保父组件中通过useForm获取formState.errors并传递给Os组件，同时使用ErrorMessage的自定义渲染函数：

// 父组件中
import { useForm } from 'react-hook-form';

const ParentComponent = () => {
  const { control, formState: { errors } } = useForm({
    defaultValues: { /* 你的默认值 */ }
  });

  return (
    // ... 其他代码
    <Os fieldArrayName="yourArrayName" index={0} control={control} errors={errors} />
    // ... 其他代码
  );
};

// Os组件中使用ErrorMessage
<ErrorMessage 
  errors={errors} 
  name={`${fieldArrayName}.${index}.os`} 
  render={({ message }) => <FormHelperText error>{message}</FormHelperText>}
/>

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