React Hook Form中Controller的Validate函数失效问题求助

问题根源 #

你的代码存在两个核心问题：

1. 校验参数处理错误：onChange中传递的是单个File对象（event.target.files[0]），但validate函数里错误地用file[0]访问属性——此时file本身就是单个文件，file[0]为undefined，导致校验条件永远不成立，始终返回错误提示。
2. file输入框value赋值无效：浏览器出于安全限制，不允许手动修改file输入框的value为文件名，这会导致输入框状态异常，间接影响校验逻辑。

修正后的代码 #

<Controller
  control={control}
  name="photograph"
  rules={{
    required: "Photograph is required!",
    validate: {
      fileSize: (file) =>
        file?.size < 1000100 || "File size shouldn't be more than 1MB!",
      acceptedFormats: (file) =>
        ["image/png", "image/jpeg"].includes(file?.type) || "Only JPEG and PNG files are accepted!",
    },
  }}
  render={({ field: { onChange, ...field } }) => {
    return (
      <input
        {...field}
        value=""
        onChange={(event) => {
          onChange(event.target.files[0]);
        }}
        type="file"
        id="photograph"
      />
    );
  }}
/>

<p>{errors.photograph?.message}</p>

关键修改说明 #

• 修正校验参数：将file[0]?.size和file[0]?.type改为file?.size和file?.type，匹配传递的单个File对象结构。
• 移除无效value赋值：将value={value?.fileName}改为value=""，符合浏览器对file输入框的安全限制，避免状态异常。
• 空值保护：保留file?.可选链操作符，避免未选择文件时触发Cannot read property 'size' of undefined的报错。

额外优化（多错误合并展示） #

如果需要同时展示所有校验错误，可将validate改为单个函数返回合并后的错误信息：

rules={{
  required: "Photograph is required!",
  validate: (file) => {
    if (!file) return;
    const errorList = [];
    if (file.size >= 1000100) errorList.push("File size shouldn't be more than 1MB!");
    if (!["image/png", "image/jpeg"].includes(file.type)) errorList.push("Only JPEG and PNG files are accepted!");
    return errorList.length === 0 ? true : errorList.join(" ");
  }
}}

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